대응 라우터가 구성 요소를 렌더링하지 않습니까?

Question

원본 홈 구성 요소를 표시하지 않고 새 구성 요소를 렌더링하려고합니다. 구성 요소를 분리했는데 렌더링하려고 할 때 표시되지 않습니다.

class App extends Component { 
render() { 
return (
    <div> 
     <Route exact={true} path="/" component={Home} /> 
    </div> 
); 
} 
} 

다음은 About 구성 요소 및 Pages 구성 요소를 렌더링하도록되어 내 고향 구성 요소이지만, 현재 내가 그것을 클릭 할 때 아무것도 표시되지 않습니다.

const Home =() => (
<div> 
    <h2>Home page</h2> 
    <div> 
     <ul> 
      <li><Link to="/about">About</Link></li> 
      <li><Link to="/pages">Page with Subpages</Link></li> 
     </ul> 
     <Route path="/about" component={About} /> 
     <Route path="/pages" component={Pages} /> 
    </div> 
</div> 
) 

내 약 성분 :

const About =() => (
<div> 
    <h2>About page</h2> 
</div> 
) 

내 페이지 구성 요소 : 귀하의 경우에는 당신과 페이지 구성 요소에서 정보 배치 때문에

const Pages = ({ match }) => (
<div> 
    <h2>Page with Subpages</h2> 
    <ul> 
     <li><Link to={`${match.url}/subpage1`}>Subpage 1</Link></li> 
     <li><Link to={`${match.url}/subpage2`}>Subpage 2</Link></li> 
     <li><Link to={`${match.url}/subpage3`}>Subpage 3</Link></li> 
    </ul> 

    <Route path={`${match.url}/subpage1`} component={Subpage1}/> 
    <Route path={`${match.url}/subpage2`} component={Subpage2}/> 
    <Route path={`${match.url}/subpage3`} component={Subpage3}/> 
</div> 
) 

Answer 1

는 생각, 당신은 <Route path="/" component={Home} />에서 exact을 삭제해야 홈이므로 /about URL로 이동하면 exact을 입력하기 때문에 더 이상 홈 구성 요소가 없으므로 빈 화면이 표시됩니다. 엔; 여기

class App extends React.Component { 
    render() { 
    return (
     <div> 
     <Route path="/" component={Home} /> 
     </div> 
); 
    } 
} 

전체 작업 예 : https://codesandbox.io/s/mjr8xypp4x

당신은 주요 Route이 정의 Component 클래스에있는 주요 구성 요소로 임베디드되어야하는 <BrowserRouter>의로 <Router> 구성 요소를 추가하는 것을 잊었다해야합니다

Answer 2

,

는 여기 해결책 -

import React from 'react'; 
import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom' 

class Appz extends React.Component { 
    render() { 
     return (
     <Router> 
     <div> 
      <ul> 
      <li><Link to="/about">Home</Link></li> 
      </ul> 
      <div> 
      <Route path="/" component={Home} /> 
      </div> 
      </div> 
     </Router> 
    ); 
    } 
} 

const Home =() => (
    <div> 
    <h2>Home page</h2> 
    <div> 
     <ul> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/pages">Page with Subpages</Link></li> 
     </ul> 
     <Route path="/about" component={About} /> 
     <Route path="/pages" component={Pages} /> 
    </div> 
    </div> 
) 

const About =() => (
    <div> 
    <h2>About page</h2> 
    </div> 
) 

const Pages = ({ match }) => (
    <div> 
    <h2>Page with Subpages</h2> 
    <ul> 
     <li><Link to={`${match.url}/subpage1`}>Subpage 1</Link></li> 
     <li><Link to={`${match.url}/subpage2`}>Subpage 2</Link></li> 
     <li><Link to={`${match.url}/subpage3`}>Subpage 3</Link></li> 
    </ul> 


    </div> 
) 

export default Appz; 

실시 예 - https://codesandbox.io/s/kxmj48p14v