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

javascript reactjs react-router routes url-redirection

2022-08-30 04:39:35

我有以下几点：

  <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（用于页面重定向）来做到这一点？

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

答案 1

您可以使用重定向而不是默认路由

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

更新2019-08-09以避免刷新问题，请改用这个，这要归功于Ogglas

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

源：

https://stackoverflow.com/a/43958016/3850405

答案 2

更新：

对于 v6，您可以使用这样做。您可以使用“不匹配”路由来处理“不匹配”情况。Navigate

<Routes>
  <Route path="/" element={<Navigate to="/searchDashboard" />}>
    <Route path="searchDashboard" element={<SearchDashboard/>} />
    <Route
      path="*"
      element={<Navigate to="/" />}
    />
  </Route>
</Routes>

https://reactrouter.com/docs/en/v6/getting-started/tutorial#adding-a-no-match-route

https://stackoverflow.com/a/69872699/3850405

源语言：

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

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

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

如果在登录后，请使用此：searchDashboard

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