ReactJS 在特定路线上导航（Router v4）答案

【问题标题】：ReactJS Navigate on a specific route (Router v4)ReactJS 在特定路线上导航（Router v4）
【发布时间】：2017-10-10 05:13:16
【问题描述】：

所以我对 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 。

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

有可能吗？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您不应该在 V4 中嵌套路由。

您可以使用路由器中的 Switch 组件来确保只匹配一个路由。

这样所有不匹配 /:page 路由的路由都会重定向：

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

记得导入 Switch 组件。

【讨论】：

工作就像一个魅力！谢谢！