嵌套路由不使用React Router v4呈现

Posted 2021-04-16

我试图将我的一些路由与React Router v4组合在一起以清理我的一些组件。现在我只想让我的非登录路由组合在一起，我的管理路由组合在一起，但以下操作不起作用。

main.js

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

export default Main;

public.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”，而Login组件不显示在“localhost：3000 / signup”。看看React Dev Tools，这两条路由返回Null。

答案

原因很明显。对于你在main.js中的路线，你已经用精确的Public指定了exact path='/'组件的路径路径，然后在你为其他Routes匹配的Public组件中。因此，如果路径路径是/signup，首先路径不精确，因此Public组件不会被渲染，因此没有subRoutes。

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

main.js

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

export default Main

public.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}