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”Route中的DefaultRoute指向Route“searchDashboard”。这是我可以使用React Router做的事情，还是应该使用普通的Javascript（用于页面重定向）？

基本上，如果用户转到主页，我想将它们发送到搜索仪表板。所以我想我正在寻找一个等同于window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

的React Router功能

Answer 1

您可以使用Redirect而不是DefaultRoute

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

Answer 2

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

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

但是这会创建两个不同的路径来呈现相同的组件。这不仅毫无意义，而且会导致用户界面出现故障，例如，当您根据<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 3

使用<Redirect from="/" to="searchDashboard" />的问题是，如果您有不同的网址，例如/indexDashboard，并且用户点击刷新或获取发送给他们的网址，则该用户将被重定向到/searchDashboard反正。

如果您无法让用户刷新网站或发送网址，请使用以下网址：

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

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

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

Answer 4

Jonathan的回答似乎对我有用。我使用的是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 5

更新：2020

代替使用重定向，只需在signed int

中添加多个路由

示例：

path

Answer 6

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

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

Answer 7

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

Answer 9

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

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

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

Answer 10

首先你需要安装：

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 位于您的浏览器路径上，并且渲染过程也根据其组件正常工作。

前段时间，我们有机会在反应路由中使用名为“DefaultRoute”的组件。

现在，它的贬值方法，并且使用它不是那么流行，您可以创建名为 default 的自定义路由或其他什么，但仍然不是我们在现代 React.js 开发中的做法。

这只是因为使用“DefaultRoute”路由，我们会导致一些渲染问题，这是我们绝对想避免的。

Answer 11

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

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

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

Answer 12

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

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

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>

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

13 个答案: