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

Question

我正在尝试将我的一些路由与 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 这两条路线 return Null.

Answer 1

原因很明显。对于 main.js 中的路线，您已经指定 Public 组件的路线路径与 exact path='/' 完全相同，然后在 Public 组件中匹配另一个 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}

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

Nested Routes not rendering with React Router v4

reactjs

react-router

react-router-v4

main.js

public.js