如何在 React Router 中將 DefaultRoute 設置為另一個路由

Question

我有以下內容：

  <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 中呈現。

我希望“app”路由中的 DefaultRoute 指向路由“searchDashboard”。 這是我可以用 React Router 做的事情，還是我應該為此使用普通的 Javascript（用於頁面重定向）？

基本上，如果用戶轉到主頁，我想將它們發送到搜索儀表板。 所以我想我正在尋找一個等效於window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");的 React Router 功能。

Answer 1

您可以使用重定向而不是 DefaultRoute

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

感謝 Ogglas，更新 2019-08-09 以避免出現刷新問題

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

資源：

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

Answer 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

原來的：

使用<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"/>
  )
)}/>

Answer 3

我錯誤地嘗試使用以下命令創建默認路徑：

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

但這會創建兩個不同的路徑來呈現相同的組件。 這不僅沒有意義，而且會導致 UI 出現故障，即，當您基於this.history.isActive() <Link/>元素的樣式時。

創建默認路由（不是索引路由）的正確方法是使用<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 。

Answer 4

更新：2020

而不是使用重定向，只需在path中添加多個路由

例子：

<Route exact path={["/","/defaultPath"]} component={searchDashboard} />

Answer 5

喬納森的回答似乎對我不起作用。 我正在使用 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

Answer 6

由於最近發布了 V6，因此接受的答案將不起作用，因為 V6 中不再存在 Redirect。 考慮使用導航。

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

參考：- V6 文檔

Answer 7

import { Route, Redirect } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div>
        <Route path='/'>
          <Redirect to="/something" />
        </Route>
//rest of code here

這將使得當您在本地主機上加載服務器時，它會將您重定向到 /something

Answer 8

我遇到了類似的問題； 如果沒有一個路由處理程序匹配，我想要一個默認路由處理程序。

我的解決方案是使用通配符作為路徑值。 即還要確保它是您的路線定義中的最后一個條目。

<Route path="/" component={App} >
    <IndexRoute component={HomePage} />
    <Route path="about" component={AboutPage} />
    <Route path="home" component={HomePage} />
    <Route path="*" component={HomePage} />
</Route>

Answer 9

對於那些進入 2017 年的人來說，這是IndexRedirect的新解決方案：

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>

Answer 10

2022 年 5 月

1. 導入Navigate

import { Routes, Route, Navigate } from 'react-router-dom';

2. 添加

<Route path="/" element={<Navigate replace to="/home" />} />

例如：

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';

import Home from './pages/Home';
import Login from './pages/Login';

const Main = () => {
    return (
        <Routes>
            <Route path="/" element={<Navigate replace to="/home" />} />
            <Route path='home' element={<Home />}></Route>
            <Route path='login' element={<Login />}></Route>
        </Routes>
    );
}

export default Main;

3. 完畢！

Answer 11

 <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>

Answer 12

首選方法是使用反應路由器IndexRoutes組件

你像這樣使用它（取自上面鏈接的反應路由器文檔）：

<Route path="/" component={App}>
    <IndexRedirect to="/welcome" />
    <Route path="welcome" component={Welcome} />
    <Route path="about" component={About} />
</Route>

Answer 13

首先你需要安裝：

npm install react-router-dom;

然后你需要使用你的 App.js（在你的情況下它可以不同）並進行下面的修改。 在這種情況下，我選擇了重定向來獲得正確的渲染過程。

import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";

<Router>
        <Suspense fallback={<Loading />}>
          <Switch>
            <Route exact path="/">
              <Redirect to="/Home" component={Routes.HomePage}/>
            </Route>
            <Route exact path="/Biz" component={Routes.Biz} />
          </Switch>
        </Suspense>
      </Router>

您成功地進行了上面的修改，您可以看到重定向 URL 在您的瀏覽器路徑上，並且渲染過程也根據它們的組件正常工作。

前段時間，我們有機會在 react 路由中使用了名為“DefaultRoute”的組件。

現在，它的折舊方法，並且使用它不是很流行，您可以創建名為 default 或其他名稱的自定義路由，但仍然不是我們在現代 React.js 開發中這樣做的方式。

只是因為使用“DefaultRoute”路由，我們可能會導致一些渲染問題，這是我們絕對希望避免的事情。

Answer 14

這是我的做法-

<Router>
  <div className="App">
    <Navbar />
    <TabBar />
    <div className="content">
      <Route exact path={["/default", "/"]}> //Imp
        <DefStuff />
      </Route>
      <Route exact path="/otherpage">
        <Otherstuff />
      </Route>
      <Redirect to="/defult" /> //Imp
    </div>
  </div>
</Router>

Answer 15

利用：

<Route path="/" element={<Navigate replace to="/expenses" />} />

在上下文中：

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

<BrowserRouter>
  <Routes>
    <Route element={<App />}>
      <Route path="/expenses" element={<Expenses />} />
      <Route path="/invoices" element={<Invoices />} />
    </Route>
    <Route path="/" element={<Navigate replace to="/expenses" />} />
  </Routes>
</BrowserRouter>

Answer 16

您可以像這樣使用它來重定向特定的 URL，並在從舊路由器重定向到新路由器后渲染組件。

<Route path="/old-router">
  <Redirect exact to="/new-router"/>
  <Route path="/new-router" component={NewRouterType}/>
</Route>