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

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

您可以使用重定向代替默认路由

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

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

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

来源：

Answer 2

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

<IndexRoute component={Home}/>.

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

<IndexRoute component={SearchDashboard}/>.

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

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

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

首选方法是使用 react 路由 IndexRoutes 组件

你这样使用它（取自上面链接的反应路由器文档）：

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

Answer 6

我运行遇到了类似的问题；如果路由处理程序的 none 匹配，我想要一个默认路由处理程序。

我的解决方案是使用通配符作为路径值。 IE 还要确保它是路由定义中的最后一个条目。

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

Answer 7

更新：

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

原文：

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

如果您不希望用户能够刷新站点或发送 URLs 使用此：

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

如果 searchDashboard 落后于登录，请使用此选项：

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

Answer 8

对于即将进入 2017 年的用户，这是 IndexRedirect 的新解决方案：

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

Answer 9

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 10

您可以像这样使用它在特定的 URL 上重定向并在从旧路由器重定向到新路由器后呈现组件。

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

Answer 11

更新：2020

不使用重定向，只需在 path

中添加多个路由

示例：

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

Answer 12

首先你需要安装：

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 13

这是我的做法-

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

由于最近发布了 V6，因此接受的答案将无效，因为 V6 中不再存在重定向。考虑使用导航。

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

参考：- V6 docs

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

2022 年 5 月

导入Navigate

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

添加

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

完成！

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

How to set the DefaultRoute to another Route in React Router

javascript

routes

reactjs

url-redirection

react-router