React嵌套路由不会改变

Posted 2021-04-06

我试图在我的仪表板内创建一些路线，但我有一些困难，我的项目有一个根页面，其中有/ admin its working fine, inside of the admin page Im using the same code with /home but its无法正常工作的路由（访问/ admin / home）..这是我的代码：

根：

render() {
    return (
      <Router>
        <div>
        <Navigation authUser={this.state.authUser} />

          <Route
            exact path={routes.ADMIN}
            component={AdminPage}
          />
        </div>
      </Route>

admin：render（）{const {users} = this.props;

return (
  <div>
    <Switch>
      <Route
        exact path={routes.ADMIN_HOME}
        component={AdmHomePage}
      />

    </Switch>

  </div>

route.ADMIN_HOME =='/ home'

route.ADMIN =='/ admin'

答案

您需要为子路径嵌套整个路径，包括父路径。

例如route.ADMIN_HOME应该是/admin/home

同样重要的是父路线不包括确切的道具。这是因为父路线不会渲染，除非它完全是/admin所以它永远不会渲染父组件中的路线。

我在下面附上了一个可运行的例子。注意;我已经为HashRouter切换了BrowserRouter，以便它在StackOverflow上运行。

const HashRouter = ReactRouterDOM.HashRouter;
const Route = ReactRouterDOM.Route;
const Link = ReactRouterDOM.Link;
const Switch = ReactRouterDOM.Switch;

const Players = () => (
  <div>
    <h5>Players</h5>
    <Switch>
      <Route path="/players/joe" render={() => <div>Joe</div>} />
      <Route path="/players/emily" render={() => <div>Emily</div>} />
    </Switch>
  </div>
);

ReactDOM.render(
  <HashRouter>
    <div>
      <h5>Navigation</h5>
      <ul>
        <li><Link to="/players">Players</Link></li>
        <li><Link to="/players/joe">Players - Joe</Link></li>
        <li><Link to="/players/emily">Players - Emily</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
      <Switch>
        <Route path="/players" component={Players} />
        <Route path="/about" render={() => <div>About Page</div>} />
      </Switch>
    </div>
  </HashRouter>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<div id="root"></div>

以上是关于React嵌套路由不会改变的主要内容，如果未能解决你的问题，请参考以下文章

React 路由使用

Webpack 2 + React - 使用 System.import 进行代码拆分时的嵌套路由

使用 react-router 和 IndexRoute 嵌套路由（反应路由器布局）

十八React react-router4.x中：实现路由模块化以及嵌套路由父子组件传值

react-router4 嵌套路由

存在嵌套片段时 setRetainInstance(true) 将不起作用