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组件显示在＆＃34; localhost：3000 /＆＃34;，但SignupPage组件未显示在＆＃34; localhost：3000 / signup＆＃34;并且登录组件不会显示在＆＃34; localhost：3000 / signup＆＃34;。看看React Dev Tools，这两条路由返回Null。

Answer 1

原因非常明显。对于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}

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

main.js

public.js

1 个答案: