118

私は次のものを持っています：

  <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 を使用すると、*Dashboard はダッシュボード内でレンダリングする必要があるため、SearchDashboard は正しくレンダリングされません。

「アプリ」ルート内の DefaultRoute がルート「searchDashboard」を指すようにしたいと思います。これは React Router でできることですか、それとも通常の Javascript (ページ リダイレクト用) を使用する必要がありますか?

基本的に、ユーザーがホームページにアクセスすると、代わりに検索ダッシュボードに送信したいと考えています。だから私はReact Router機能と同等のものを探していると思いますwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

4

14 に答える 14

65

アップデート：

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

オリジナル：

使用に関する問題<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"/>
  )
)}/>
于 2017-05-13T21:09:59.583 に答える
12

更新：2020

リダイレクトを使用する代わりに、単純に複数のルートをpath

例：

<Route exact path={["/","/defaultPath"]} component={searchDashboard} />
于 2020-06-18T16:48:02.867 に答える
11

ジョナサンの答えは私にはうまくいかなかったようです。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

于 2015-10-14T07:16:44.430 に答える
2 
 <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>
    <Redirect from="/*" to="/" />
  </Route>
于 2016-11-18T19:46:26.573 に答える
0

このように使用して、特定の URL にリダイレクトし、古いルーターから新しいルーターにリダイレクトした後にコンポーネントをレンダリングします。

<Route path="/old-router">
  <Redirect exact to="/new-router"/>
  <Route path="/new-router" component={NewRouterType}/>
</Route>
于 2020-05-07T09:17:10.267 に答える