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

Answer 1

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

Source:

https://stackoverflow.com/a/43958016/3850405

Answer 2

Update for version 6.4.5 to 6.8.1 <:

Use replace={true} for Navigate component.

<Routes>
  <Route path="/" element={<Navigate to="/searchDashboard" replace={true} />}>
    <Route path="searchDashboard" element={<SearchDashboard/>} />
    <Route
      path="*"
      element={<Navigate to="/" replace={true} />}
    />
  </Route>
</Routes>

https://reactrouter.com/en/6.4.5/components/navigate https://reactrouter.com/en/6.8.1/components/navigate

Thanks to @vicky for pointing this out in comments.

Update:

For v6 you can do it like this with Navigate. You can use a "No Match" Route to handle "no match" cases.

<Routes>
  <Route path="/" element={<Navigate to="/searchDashboard" />}>
    <Route path="searchDashboard" element={<SearchDashboard/>} />
    <Route
      path="*"
      element={<Navigate to="/" />}
    />
  </Route>
</Routes>

https://reactrouter.com/docs/en/v6/getting-started/tutorial#adding-a-no-match-route

https://stackoverflow.com/a/69872699/3850405

Original:

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

Answer 3

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.

Answer 4

2020:

Instead of using Redirect, simply add multiple routes in the path.

Example:

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

UPDATE 2023

This doesn't work in v6, so use this instead

<Route exact path="/" element={searchDashboard} />
<Route exact path="/defaultPath" element={searchDashboard} />

Answer 5

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

Answer 6

Since V6 was released recently, the accepted answer won't work since Redirect no more exists in V6. Consider using Navigate.

 <Route path="/" element={<Navigate to="/searchDashboard" />} />

Ref:- V6 docs

Answer 7

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

Answer 8

May 2022

1. Import Navigate

import { Routes, Route, Navigate } from 'react-router-dom';

2. Add

<Route path="/" element={<Navigate replace to="/home" />} />

For example:

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';

import Home from './pages/Home';
import Login from './pages/Login';

const Main = () => {
    return (
        <Routes>
            <Route path="/" element={<Navigate replace to="/home" />} />
            <Route path='home' element={<Home />}></Route>
            <Route path='login' element={<Login />}></Route>
        </Routes>
    );
}

export default Main;

3. Done!

Answer 9

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>

Answer 10

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>

Answer 11

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

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>

Answer 13

Firstly you need to install:

npm install react-router-dom;

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

If you successfully do the modification above, you 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, it's a deprecated 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 it's the thing that we definitely would like to avoid.

Answer 14

Here is how I do it-

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

Answer 15

Use:

<Route path="/" element={<Navigate replace to="/expenses" />} />

In context:

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

<BrowserRouter>
  <Routes>
    <Route element={<App />}>
      <Route path="/expenses" element={<Expenses />} />
      <Route path="/invoices" element={<Invoices />} />
    </Route>
    <Route path="/" element={<Navigate replace to="/expenses" />} />
  </Routes>
</BrowserRouter>

Answer 16

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>

Answer 17

Place the following code after all the exact routes. If none of them matches the current route, it'll render the default route.

<Route path="*" element={<DefaultComponent />} />

Answer 18

Redirect to /Home when user goes to / (default Route):

 <Route path="/" element={<Navigate to="/Home" />} />

Use the Navigate element to redirect the user to /Home every time they go to the / route.

Answer 19

You can achieve the desired behavior by using the Switch component and placing the default route at the end:

1. Import the necessary components from React Router in your application:

   import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
   

2. Define your routes in the `Switch` component, placing the default route at the end:

   <Router>
     <Switch>
       <Route exact path="/" component={Home} />
       <Route path="/users" component={Users} />
       <Route path="/profile/:id" component={Profile} />
       <Route component={DefaultRoute} />
     </Switch>
   </Router>
   

In this example:
- The first route matches the exact path `/` and renders the `Home` component.
- The second route matches the path `/users` and renders the `Users` component.
- The third route matches the path `/profile/:id` and renders the `Profile` component. This route requires an `id` parameter.
- The last route, without a specified path, acts as the default route and renders the `DefaultRoute` component. This component will be shown when none of the previous routes match the current URL.
To handle 404 errors this way, define the `DefaultRoute` component and import it into your application.

function DefaultRoute() {
  return (
    <div>
      <h2>404 Not Found</h2>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
}

export default DefaultRoute;

With this setup, if none of the routes match the current URL, the DefaultRoute component will be rendered, serving as the default route. You can customize the DefaultRoute component to display a custom 404 page or any other desired content.

Source: https://www.devban.com/react-router-ultimate-guide/