无法使用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，这两条路线返回Null。

Answer 1

原因很明显。在main.js中为您的路线指定了Public组件的Route路径，并指定了精确exact path='/'，然后在Public组件中为另一个组件匹配Routes。因此，如果路由路径为/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}