React-routerがネストしたページをロードできない

Question

react-routerがネストされたページをロードできません。

Iが反応-ルータ

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に表示されます同時にHomeだけでなく、他のページを表示するので、あなたのルートの設定がIndexRouteで更新する必要はありません。

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