嵌套反应路由器

Question

我需要一些帮助来完成 ReactJS 中的路由。 我描述了我的问题，希望你能帮助我..

我在这个文件中有著名的 index.js，我从中调用 app.js

**index.js** 

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
);

在 app.js 里面我写了一些路由代码如下：

**App.js**

return (
        <div>
            {message &&
                <div className={`alert ${type}`}>{message}</div>
            }
            <Router history={history}>
                <div>
                    <PrivateRoute exact path="/" component={Main} />
                    <Route path="/login" component={SignIn} />
                </div>
            </Router>
        </div>
    );

这工作正常，登录后我重定向到 Main.js

现在我的问题：

我在 Main.js 页面中编写了一些路由，所有其他页面都必须从该路由继承。我的意思是所有其他页面必须有 Main.js 的骨架

这是 Main.js 的一些代码

**Main.js**

<main className={classes.content}>
    <Link to="/HomePage"> HomePage</Link>
    <Link to="/Admin"> Admin </Link>
    <Link to="/Menus"> Menu </Link>
    <Link to="/Product"> Product </Link>
    <div className={classes.appBarSpacer} />
    <Switch>
        <PrivateRoute path="/HomePage" component={HomePage} />
        <PrivateRoute path="/Admin" component={Admin} />
        <PrivateRoute path="/Menus" component={Menus} />
        <PrivateRoute path="/Product" component={Product} />
    </Switch>
</main>

不幸的是，这些路线都不起作用.. 我非常困惑，因为所有的事情似乎都是正确的

Answer 1

问题

没有一个嵌套路径与主路由器的PrivateRoute 呈现的“/”完全匹配，因此它们不会被呈现。

解决方案

将父路由放在Switch 中并重新排序路由，以便可以在更通用的“/”路径之前匹配“/login”路径。从 "/" 路径中移除 exact 属性。

App.js

return (
  <div>
    {message &&
      <div className={`alert ${type}`}>{message}</div>
    }
    <Router history={history}>
      <Switch>
        <Route path="/login" component={SignIn} />
        <PrivateRoute path="/" component={Main} />
      </Switch>
    </Router>
  </div>
);

Main.js

<main className={classes.content}>
  <Link to="/HomePage"> HomePage</Link>
  <Link to="/Admin"> Admin </Link>
  <Link to="/Menus"> Menu </Link>
  <Link to="/Product"> Product </Link>
  <div className={classes.appBarSpacer} />
  <Switch>
    <PrivateRoute path="/HomePage" component={HomePage} />
    <PrivateRoute path="/Admin" component={Admin} />
    <PrivateRoute path="/Menus" component={Menus} />
    <PrivateRoute path="/Product" component={Product} />
  </Switch>
</main>