How to set the DefaultRoute to another Route in React Router

Question

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.

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?

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");

@JonatanLundqvistMedén that's exactly what I was looking for, thank you! Write it as an answer and I'll mark it as correct. Sorry for the delayed response. — Matthew Herbst, Apr 17 '15 at 22:19

Jonatan Lundqvist Medén · Accepted Answer · 2019-08-08T08:47:47.790

164

You can use Redirect instead of DefaultRoute

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

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

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

edited Aug 08 '19 at 08:47

answered Apr 19 '15 at 06:04

Jonatan Lundqvist Medén

2,390
1
15
15

6

is it just me, or when using this to hit a deep url directly, I always get redirected to the "to" url, instead of the route I'm trying to hit? – Pablote Apr 17 '17 at 18:47
Should be noticed that if you are doing some redirection like `from='/a' to='/a/:id'`, you will need to use `` to include your `` and `` component from react-router. Details see [doc](https://github.com/ReactTraining/react-router/blob/dc2149ec0c63bfc95b71e40c81431e34cfbfeda9/packages/react-router/docs/api/Redirect.md#from-string) – Kulbear May 24 '17 at 09:08
1

@Kulbear I had the same problem. Doing what Ogglas said in his answer worked. – Alan P. Jun 22 '17 at 23:46
2

To make it work you most likely need to put this route last or do this `` – Aleksei Poliakov Apr 27 '19 at 19:27
It's easy to oversee it, so I repeat: The important part of DarkWalker's Redirect rule is the `exact` flag. The acceptet answer is missing that, so it matches [almost] any route. – dube May 15 '19 at 11:32

score 62 · Answer 2 · answered May 13 '17 at 21:09

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

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

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

Use this if searchDashboard is behind login:

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

Seth · Answer 3 · 2015-12-08T00:54:22.757

37

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

The right way to create a default route (that is not the index route) is to use <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.

edited Dec 08 '15 at 00:54

answered Dec 04 '15 at 03:19

Seth

5,489
4
40
51

What's the point of having a `Route` to something that is already handled by your `IndexRoute`? – Matthew Herbst Dec 04 '15 at 03:52
1

There is no point, and I edited my answer to make it clear I was not advocating that. – Seth Dec 04 '15 at 03:58
This is what I've been doing as well, but I'd love a solution that serves up a component (my homepage) at `/` instead of having to redirect to e.g. `/home`. – ericsoco Aug 08 '16 at 23:39
Looks like I'm looking for `` after all. Sorry for the noise. http://stackoverflow.com/questions/32706913/react-router-what-is-the-purpose-of-indexroute https://github.com/reactjs/react-router/blob/master/docs/guides/IndexRoutes.md#index-routes – ericsoco Aug 08 '16 at 23:42

score 11 · Answer 4 · answered Oct 14 '15 at 07:16

11

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:

<IndexRoute component={Home}/>.

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

<IndexRoute component={SearchDashboard}/>.

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

answered Oct 14 '15 at 07:16

dwilt

517
6
12

Thanks for the share. I was using React v0.13 and the version of React-Router for that, so a pre-1.0/rc version. Hope this helps others! – Matthew Herbst Oct 14 '15 at 14:59
I think this makes you lose the context. `SearchDashboard` will be the component you will see when you arrive at the homepage, but not the `Dashboard` component that is wrapping it if you go directly to `/dashboard/searchDashboard`. React-router dynamically builds up a hierarchy of nested components based on the routes matched by the URL, so I think you really do need a redirect here. – Stijn de Witt Jan 19 '16 at 12:34

score 8 · Answer 5 · answered Jun 18 '20 at 16:48

8

UPDATE : 2020

Instead of using Redirect, Simply add multiple route in the path

Example:

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

answered Jun 18 '20 at 16:48

Thanveer Shah

2,480
2
9
20

score 6 · Answer 6 · answered Oct 03 '18 at 21:32

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

score 3 · Answer 7 · answered Apr 30 '17 at 02:16

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>

score 3 · Answer 8 · answered Nov 02 '17 at 00:40

3

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

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

answered Nov 02 '17 at 00:40

Kevin Hernandez

494
1
5
17

score 2 · Answer 9 · answered Nov 18 '16 at 19:46

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>

answered Nov 18 '16 at 19:46

user3889017

19
3

What is equivalent of `DefaultRoute` in `react-router` v4? – Anthony Kong Mar 22 '17 at 06:08
4

@AnthonyKong I think it is: `` . https://reacttraining.com/react-router/web/example/basic – TYMG Apr 30 '17 at 16:22

score 1 · Answer 10 · answered Mar 02 '17 at 18:00

The preferred method is to use the react router IndexRoutes component

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>

score 1 · Answer 11 · answered Feb 28 '21 at 20:32

Firstly u need to install:

npm install react-router-dom;

Then u need to use your App.js (in your case it can be different) and do the modification below. In this case I selected the Redirect to get proper rendering process.

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>

U successfully do the modification above u can see the redirect URL is on your browser path and rendering process also working properly according to their component.

Some time ago, we had an opportunity to use the component named "DefaultRoute" in the react routing.

Now, its depreciated method, and it’s not so popular to use it, you can create the custom route named default or whatever, but still, it’s not how we do it in modern React.js development.

It’s just because using the "DefaultRoute" route, we can cause some rendering problems, and its the thing that we definitely would like to avoid.

score 0 · Answer 12 · answered May 07 '20 at 09:17

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

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

How to set the DefaultRoute to another Route in React Router

12 Answers12

Linked