如何在 React Router 中将 DefaultRoute 设置为另一个路由

IT技术 javascript routes reactjs url-redirection react-router
2021-04-14 23:42:13

我有以下几点：

  <Route name="app" path="/" handler={App}>
    <Route name="dashboards" path="dashboards" handler={Dashboard}>
      <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} />
      <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} />
      <DefaultRoute handler={DashboardExplain} />
    </Route>
    <DefaultRoute handler={SearchDashboard} />
  </Route>

使用 DefaultRoute 时，SearchDashboard 呈现错误，因为任何 *Dashboard 都需要在 Dashboard 中呈现。

我希望“应用程序”路由中的 DefaultRoute 指向路由“searchDashboard”。这是我可以用 React Router 做的事情，还是我应该为此使用普通的 Javascript（用于页面重定向）？

基本上，如果用户转到主页，我想将它们发送到搜索仪表板。所以我想我正在寻找一个相当于window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

6个回答

您可以使用重定向代替 DefaultRoute

<Redirect from="/" to="searchDashboard" />

感谢 Ogglas，更新 2019-08-09 以避免刷新问题，请改用它

<Redirect exact from="/" to="searchDashboard" />
监督它很容易，所以我再说一遍：DarkWalker 重定向规则的重要部分是exact标志。接受者的答案缺少那个，所以它[几乎]匹配任何路线。
2021-05-27 23:42:13
@Kulbear 我遇到了同样的问题。做奥格拉斯在他的回答中所说的工作。
2021-06-04 23:42:13
是不是只有我，或者当使用它直接点击一个深层网址时，我总是被重定向到“to”网址，而不是我试图点击的路线？
2021-06-06 23:42:13
应该注意的是，如果您正在执行一些重定向，例如from='/a' to='/a/:id'，您将需要使用<Switch>来包含来自 react-router 的<Redirect>和<Route>组件。详情见文档
2021-06-17 23:42:13
为了让它工作，你很可能需要把这条路线放在最后或这样做 <Redirect exact from="/" to="/adaptation" />
2021-06-21 23:42:13

使用的问题<Redirect from="/" to="searchDashboard" />是如果你有一个不同的 URL，比如/indexDashboard用户点击刷新或获取发送给他们的 URL，用户/searchDashboard无论如何都会被重定向到。

如果您不希望用户能够刷新站点或发送 URL，请使用以下命令：

<Route exact path="/" render={() => (
    <Redirect to="/searchDashboard"/>
)}/>

如果searchDashboard在登录后使用此选项：

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/searchDashboard"/>
  ) : (
    <Redirect to="/login"/>
  )
)}/>

我错误地尝试使用以下方法创建默认路径：

<IndexRoute component={DefaultComponent} />
<Route path="/default-path" component={DefaultComponent} />

但这会创建两个不同的路径来呈现相同的组件。这不仅毫无意义，而且可能会导致 UI 出现故障，即，当您<Link/>基于this.history.isActive().

创建默认路由（不是索引路由）的正确方法是使用<IndexRedirect/>：

<IndexRedirect to="/default-path" />
<Route path="/default-path" component={DefaultComponent} />

这是基于 react-router 1.0.0。请参阅https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js。

没有意义，我编辑了我的答案以明确表示我不是在提倡这一点。
2021-05-24 23:42:13
拥有一个Route已经由你处理的东西有IndexRoute什么意义？
2021-05-30 23:42:13
2021-06-02 23:42:13
这也是我一直在做的事情，但我希望有一个解决方案可以提供一个组件（我的主页），/而不必重定向到例如/home.
2021-06-04 23:42:13

乔纳森的回答似乎对我不起作用。我正在使用 React v0.14.0 和 React Router v1.0.0-rc3。这做到了：

<IndexRoute component={Home}/>.

所以在马修的案例中，我相信他会想要：

<IndexRoute component={SearchDashboard}/>.

来源：https : //github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md

感谢分享。我使用的是 React v0.13 和 React-Router 版本，所以是 1.0/rc 之前的版本。希望这对其他人有帮助！
2021-06-02 23:42:13
我认为这会让你失去上下文。SearchDashboard将是您到达主页时将看到的Dashboard组件，但如果您直接转到/dashboard/searchDashboard. React-router 根据 URL 匹配的路由动态构建嵌套组件的层次结构，因此我认为您确实需要在这里进行重定向。
2021-06-16 23:42:13

更新：2020

而不是使用重定向，只需在 path

例子： 

<Route exact path={["/","/defaultPath"]} component={searchDashboard} />
其它你可能感兴趣的问题
上一篇从 React Redux (create-react-app) 中的 package.json 获取版本号 下一篇可以在浏览器中测试 React Native 应用程序吗？