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

我试图将我的一些路由与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 .

回答(1)

2 years ago

原因很明显 . 对于main.js中的路由,您已指定 Public 组件的路径路径,其中包含完全 exact path='/' ,然后在您为其他 Routes 匹配的公共组件中 . 因此,如果路径路径是 /signup ,则首先路径不准确,因此不会渲染 Public 组件,因此不会有子路径 .

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

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}