반응 라우터가 중첩 페이지를로드 할 수 없습니다.

Question

반응 라우터가 중첩 페이지를로드 할 수 없습니다.

나는 반작용-라우터

import React from 'react'; 
import { Router, Route, IndexRoute, useRouterHistory } from 'react-router'; 
import { createHistory } from 'history'; 

import App from './components/app'; 
import Authors from'./components/authors/authorPage'; 
import About from'./components/about/aboutPage'; 

const appHistory = useRouterHistory(createHistory)({ basename: "/" }); 

const Routes =() => 
{ 
    const routes = (
     <Route path="/" component={App}> 
      <Route path="/about" component={About}/> 
      <Route path="/authors" component={Authors}/> 
     </Route> 
    ); 

    return (
    <Router history={ appHistory }> 
     {routes} 
    </Router>); 
}; 

export default Routes; 

과는

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

const Header =() => 
{ 
    return (
     <nav className="navbar navbar-default"> 
      <div className="container-fluid"> 
       <a href="/" className="navbar-brand"> 
        <img src="images/pluralsight-logo.png"/> 
       </a> 
       <ul className="nav navbar-nav"> 
        <li><Link to="/">Home</Link></li> 
        <li><Link to="/about">About</Link></li> 
        <li><Link to="/authors">Authors</Link></li> 
       </ul> 
      </div> 
     </nav> 
    ); 
}; 

export default Header; 

응용 프로그램의 구성 요소로 헤더 페이지에있는 링크를 통해 호출하기위한 다음과 같은 구성을

import Home from './homePage'; 
import Header from './common/header'; 

const App =() => 
{ 
    return (
     <div> 
      <Header /> 
      <div className="container-fluid"> 
       <Home/> 
      </div> 
     </div> 
    ); 
}; 

export default App; 

루트되어 있습니다 앱이 정상적으로로드되고 기본 루트 페이지가 표시됩니다. 그러나 링크 중 하나를 클릭하면 주소 표시 줄이 해당 링크 (http://localhost:9005/about)로 변경되지만 아무 것도 렌더링되지 않으므로 약 페이지가로드되지 않습니다. 내가 수동으로 해당 페이지 (http://localhost:9005/about)를 입력하면

는 사실, 난 당신이로드 경로를 기대하고 그 자리에 children을 놓치고있는 오류를

Cannot GET /about

Answer 1

를 얻을.

const App = ({ children }) => 
{ 
    return (
     <div> 
      <Header /> 
      <div className="container-fluid"> 
       <Home/> 

       {children} <--- Route components will appear here 
      </div> 
     </div> 
    ); 
}; 

아마도 당신은 너무 Home 루트 URL에 나타날 것 IndexRoute와 경로 설정을뿐만 아니라 동시에 다른 페이지로 Home을 보여, 그래서 업데이트하지 않습니다.

<Route path="/" component={App}> 
    <IndexRoute component={Home}/> 
    <Route path="/about" component={About}/> 
    <Route path="/authors" component={Authors}/> 
</Route>