ReactJS 在特定路由上导航(路由器 v4)

Question

所以我对 ReactJS 有点陌生，我想用我的代码实现以下目标 -

const App = () => (
  <div>
    <Header />
    <Route path="/:page" exact component={PageWrapper} />
    <Route path="/" exact>
      <Redirect to="/home" />
    </Route>
  </div>
);

所以我想实现，如果用户输入/home、/about、/anythingElse 作为它不导航的链接，但如果用户加载页面而不传递页面参数，例如 - localhost：3000/或 localhost：3000，那么它会自动将用户导航到 localhost：3000/home。

目前，如果用户进入页面，它还导航到主页。我认为精确意味着确切的路线必须匹配才能加载。

可能吗？

Answer 1

不应在 V4 中嵌套路由。

您可以使用路由器中的交换机组件来确保仅匹配一个路由。

这样，所有与 /:p age 路由不匹配的路由都将重定向：

const App = () => (
  <div>
    <Header />
    <Switch>
      <Route path="/:page" exact component={PageWrapper} />
      <Redirect to="/home" />
    </Switch>
  </div>
)

请记住导入交换机组件。