如何在React路由器中将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指向Route"searchDashboard".这是我可以使用React Router做的事情,还是应该使用普通的Javascript(用于页面重定向)？

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

Answer 1

您可以使用Redirect而不是DefaultRoute

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

Answer 2

使用的问题<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中的故障,即,当你<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.

Answer 4

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

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

参考：- V6 文档

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

更新：2020

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

例子：

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

Answer 7

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 8

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