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

How to set the DefaultRoute to another Route in React Router

提问by Matthew Herbst

I have the following:

我有以下几点：

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

When using the DefaultRoute, SearchDashboard renders incorrectly since any *Dashboard needs to rendered within Dashboard.

使用 DefaultRoute 时，SearchDashboard 呈现错误，因为任何 *Dashboard 都需要在 Dashboard 中呈现。

I would like for my DefaultRoute within the "app" Route to point to the Route "searchDashboard". Is this something that I can do with React Router, or should I use normal Javascript (for a page redirect) for this?

我希望“应用程序”路线中的 DefaultRoute 指向路线“searchDashboard”。这是我可以用 React Router 做的事情，还是我应该为此使用普通的 Javascript（用于页面重定向）？

Basically, if the user goes to the home page I want to send them instead to the search dashboard. So I guess I'm looking for a React Router feature equivalent to window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

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

回答by Jonatan Lundqvist Medén

You can use Redirect instead of DefaultRoute

您可以使用重定向代替 DefaultRoute

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

Update 2019-08-09 to avoid problem with refresh use this instead, thanks to Ogglas

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

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

回答by Ogglas

The problem with using <Redirect from="/" to="searchDashboard" />is if you have a different URL, say /indexDashboardand the user hits refresh or gets a URL sent to them, the user will be redirected to /searchDashboardanyway.

使用的问题<Redirect from="/" to="searchDashboard" />是如果你有一个不同的 URL，比如/indexDashboard用户点击刷新或获取发送给他们的 URL，用户/searchDashboard无论如何都会被重定向到。

If you wan't users to be able to refresh the site or send URLs use this:

如果您不希望用户能够刷新站点或发送 URL，请使用以下命令：

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

Use this if searchDashboardis behind login:

如果searchDashboard登录后使用此选项：

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

回答by Seth

I was incorrectly trying to create a default path with:

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

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

But this creates two different paths that render the same component. Not only is this pointless, but it can cause glitches in your UI, i.e., when you are styling <Link/>elements based on this.history.isActive().

但这会创建两个不同的路径来呈现相同的组件。这不仅毫无意义，而且可能会导致 UI 出现故障，即当您<Link/>基于this.history.isActive().

The right way to create a default route (that is not the index route) is to use <IndexRedirect/>:

创建默认路由（不是索引路由）的正确方法是使用<IndexRedirect/>：

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

This is based on react-router 1.0.0. See https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js.

这是基于 react-router 1.0.0。请参阅https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js。

回答by dwilt

Jonathan's answer didn't seem to work for me. I'm using React v0.14.0 and React Router v1.0.0-rc3. This did:

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

<IndexRoute component={Home}/>.

<IndexRoute component={Home}/>.

So in Matthew's Case, I believe he'd want:

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

<IndexRoute component={SearchDashboard}/>.

<IndexRoute component={SearchDashboard}/>.

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

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

回答by dwilt

import { Route, Redirect } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div>
        <Route path='/'>
          <Redirect to="/something" />
        </Route>
//rest of code here

this will make it so that when you load up the server on local host it will re direct you to /something

这将使当您在本地主机上加载服务器时，它会将您重定向到 /something

回答by devil_io

I ran into a similar issue; I wanted a default route handler if none of the route handler matched.

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

My solutions is to use a wildcard as the path value. ie Also make sure it is the last entry in your routes definition.

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

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

回答by Kevin Hernandez

For those coming into 2017, this is the new solution with IndexRedirect:

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

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

回答by user3889017

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

回答by Marc Costello

The preferred method is to use the react router IndexRoutescomponent

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

You use it like this (taken from the react router docs linked above):

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

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

回答by surbhi241

You use it like this to redirect on a particular URL and render component after redirecting from old-router to new-router.

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

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