Reactjs React路由器无法加载嵌套页

我只是无法让react路由器加载嵌套页面

我对React路由器有以下配置

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;

从“React”导入React；
从“react Router”导入{Router，Route，IndexRoute，useRouterHistory}；
从“历史”导入{createHistory}；
从“./components/App”导入应用程序；
从“./components/Authors/authorPage”导入作者；
从“./components/About/aboutPage”导入About；
const-appHistory=useRouterHistory（createHistory）（{basename:“/”}）；
常数路由=（）=>
{
常数路由=(
);
返回(
{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;

从“React”导入React；
从“react Router”导入{Router，Route，Link}；
常量头=（）=>
{
返回(

家
关于
作者

);
};
导出默认标题；

应用程序组件是

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

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

export default App;

从“/主页”导入主页；
从“./common/Header”导入标题；
常量应用=（）=>
{
返回(
);
};
导出默认应用程序；

根应用加载得很好，我看到了主根页面。但是，单击任何链接只会将地址栏更改为该链接（

http://localhost:9005/about

）但是没有任何呈现，关于页面永远不会加载

事实上，如果我手动进入该页面（

http://localhost:9005/about

）我得到了错误

---

无法获取/about

在您希望加载路由的位置缺少

子节点

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

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

听起来您的服务器路由设置不正确。太棒了！谢谢修改应用程序以获取道具，然后设置{props.Children}，同时设置IndexRoute解决了这个问题！啊，是的，在我的回答中遗漏了这一点。我更新了它（如果你想使用解构，你可以删除
道具
）
<Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/authors" component={Authors}/>
</Route>