如何在反应路由器中将DefaultRoute设置为另一个路由

9 回答

• 1

  您可以使用Redirect而不是DefaultRoute

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

  回复于 2024-04-20T20:41:42+08:00
• 9

  我错误地尝试使用以下命令创建默认路径：

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

  回复于 2024-04-20T20:41:42+08:00
• 0

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

  回复于 2024-04-20T20:41:42+08:00
• 66

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

  回复于 2024-04-20T20:41:42+08:00
• 0

  对于那些进入2017年的人来说，这是 IndexRedirect 的新解决方案：

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

  回复于 2024-04-20T20:41:42+08:00
• 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>
  

  回复于 2024-04-20T20:41:42+08:00
• 25

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

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

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

  回复于 2024-04-20T20:41:42+08:00
• 1

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

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

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

  回复于 2024-04-20T20:41:42+08:00
• 35

  import { Route, Redirect } from "react-router-dom";
  
  class App extends Component {
    render() {
      return (
        <div>
          <Route path='/'>
            <Redirect to="/something" />
          </Route>
  //rest of code here
  

  这将使得当你在本地主机上加载服务器时，它将引导你到/某事

  回复于 2024-04-20T20:41:42+08:00