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/login”上显示。查看React开发工具，这两个路由都返回Null。

- Cody James Tooker

Answer 1

很明显的原因是，您在main.js中指定了Public组件的路由路径为exact path='/'，然后在Public组件中匹配其他Routes。因此，如果路由路径为/signup，首先路径不是精确匹配，因此Public组件不会被呈现，因此也没有子路由。

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

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}

- Shubham Khatri

---

感谢您的反馈。那确实有道理。我想我试图将旧的React Router嵌套与React Router v4方法结合起来。感谢您的帮助。现在看来很明显。 - Cody James Tooker

没问题，很高兴能帮助到您。 - Shubham Khatri