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

JavaScript

JinJin乐逆天

2020-03-12

我有以下内容:

  <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需要在Dashboard中呈现,因此SearchDashboard呈现不正确。

我想在“应用”路由中将DefaultRoute指向路由“ searchDashboard”。这是我可以使用React Router进行的操作,还是应该为此使用常规Javascript(用于页面重定向)?

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

第1295篇《如何在React Router中将DefaultRoute设置为另一个路由》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
十三小哥Jim 2020.03.12

对于即将进入2017年的用户,这是具有以下特点的新解决方案IndexRedirect

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

首选方法是使用React Router的IndexRoutes组件

您可以像这样使用它(取自上面链接的react router文档):

<Route path="/" component={App}>
    <IndexRedirect to="/welcome" />
    <Route path="welcome" component={Welcome} />
    <Route path="about" component={About} />
</Route>
梅十三 2020.03.12
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

达蒙逆天Pro 2020.03.12

我遇到了类似的问题;如果没有路由处理程序匹配,我想要一个默认的路由处理程序。

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

<Route path="/" component={App} >
    <IndexRoute component={HomePage} />
    <Route path="about" component={AboutPage} />
    <Route path="home" component={HomePage} />
    <Route path="*" component={HomePage} />
</Route>
番长理查德 2020.03.12

使用的问题<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"/>
  )
)}/>
L卡卡西米亚 2020.03.12
 <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>
阿飞米亚 2020.03.12

乔纳森的答案似乎对我没有用。我正在使用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

小卤蛋村村 2020.03.12

我错误地尝试使用以下方法创建默认路径:

<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

凯神无 2020.03.12

您可以使用Redirect代替DefaultRoute

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

更新2019-08-09为避免刷新问题,请改用此,这要感谢Ogglas

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android