嵌套路由不使用 React Router v4 渲染

IT技术 reactjs react-router react-router-v4
2021-04-11 04:29:35

我正在尝试将我的一些路由与 React Router v4 组合在一起以清理我的一些组件。现在，我只想将未登录的路由组合在一起，并将管理路由组合在一起，但以下方法不起作用。

主文件

const Main = () => {
  return (
    <main>
      <Switch>
        <Route exact path='/' component={Public} />
        <Route path='/admin' component={Admin} />
      </Switch>
    </main>
  );
};

export default Main;

公共.js

const Public = () => {
  return (
    <Switch>
      <Route exact path='/' component={Greeting} />
      <Route path='/signup' component={SignupPage} />
      <Route path='/login' component={LoginPage} />
    </Switch>
  );
};

export default Public;

Greeting 组件显示在“localhost:3000/”，但 SignupPage 组件不显示在“localhost:3000/signup”并且登录组件不显示在“localhost:3000/signup”。查看 React Dev Tools 这两条路线返回 Null。

1个回答

原因很明显。对于 main.js 中的路由，您已Public使用精确指定组件的路由路径，exact path='/'然后在公共组件中匹配另一个Routes. 因此，如果路由路径为/signup，则起初路径不准确，因此Public不会呈现组件，因此不会呈现子路由。

将您的路由配置更改为以下内容

主文件

const Main = () => {
  return (
    <main>
      <Switch>
        <Route path='/' component={Public} />
        <Route path='/admin' component={Admin} />
      </Switch>
    </main>
  );
};

export default Main

公共.js

const Public = () => {
  return (
    <Switch>
      <Route exact path='/' component={Greeting} />
      <Route path='/signup' component={SignupPage} />
      <Route path='/login' component={LoginPage} />
    </Switch>
  );
};

此外，当您指定嵌套路由时，这些应该是相对于父路由的，例如，如果父路由是/home，然后在您希望编写的子路由中/dashboard。应该这样写

<Route path="/home/dashboard" component={Dashboard}

甚至更好

<Route path={`${this.props.match.path}/dashboard`} component={Dashboard}
感谢您的反馈。这确实有道理。我想我试图将旧的 React Router 嵌套与 React Router v4 方法结合起来。谢谢您的帮助。现在我看它很明显。
2021-05-26 04:29:35
没问题，很高兴有帮助
2021-05-31 04:29:35
其它你可能感兴趣的问题
上一篇可以使用 getDerivedStateFromProps 作为 componentWillReceiveProps 的替代方案 下一篇css位置绝对使文本框下降