How to set the DefaultRoute to another Route in React Router

Question

I have the following      lt Route name  app  path     handler  App  gt       lt Route name  dashboards  path  dashboards  handler  Dashboard  gt         lt Route name  exploreDashboard  path  exploreDashboard  handler  ExploreDashboard    gt         lt Route name  searchDashboard  path  searchDashboard  handler  SearchDashboard    gt         lt DefaultRoute handler  DashboardExplain    gt       lt  Route gt       lt DefaultRoute handler  SearchDashboard    gt     lt  Route gt    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

User · Answer

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    lt Route path     component  App   gt       lt IndexRoute component  HomePage    gt       lt Route path  about  component  AboutPage    gt       lt Route path  home  component  HomePage    gt       lt Route path     component  HomePage    gt   lt  Route gt

User · Answer

You use it like this to redirect on a particular URL and render component after redirecting from old-router to new-router    lt Route path   old-router  gt     lt Redirect exact to   new-router   gt     lt Route path   new-router  component  NewRouterType   gt   lt  Route gt

User · Answer

You can use Redirect instead of DefaultRoute   lt Redirect from     to  searchDashboard    gt    Update 2019-08-09 to avoid problem with refresh use this instead  thanks to Ogglas   lt Redirect exact from     to  searchDashboard    gt

User · Answer

lt Route name  app  path     handler  App  gt       lt Route name  dashboards  path  dashboards  handler  Dashboard  gt         lt Route name  exploreDashboard  path  exploreDashboard  handler  ExploreDashboard    gt         lt Route name  searchDashboard  path  searchDashboard  handler  SearchDashboard    gt         lt DefaultRoute handler  DashboardExplain    gt       lt  Route gt       lt Redirect from      to       gt     lt  Route gt

User · Answer

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    lt IndexRoute component  Home   gt    So in Matthew s Case  I believe he d want    lt IndexRoute component  SearchDashboard   gt    Source  https   github com rackt react-router blob master docs guides advanced ComponentLifecycle md

User · Answer

For those coming into 2017  this is the new solution with IndexRedirect    lt Route path     component  App  gt     lt IndexRedirect to   welcome    gt     lt Route path  welcome  component  Welcome    gt     lt Route path  about  component  About    gt   lt  Route gt

User · Answer

The preferred method is to use the react router IndexRoutes component  You use it like this  taken from the react router docs linked above     lt Route path     component  App  gt       lt IndexRedirect to   welcome    gt       lt Route path  welcome  component  Welcome    gt       lt Route path  about  component  About    gt   lt  Route gt

User · Answer

I was incorrectly trying to create a default path with    lt IndexRoute component  DefaultComponent    gt   lt Route path   default-path  component  DefaultComponent    gt    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  lt Link  gt  elements based on this history isActive     The right way to create a default route  that is not the index route  is to use  lt IndexRedirect  gt      lt IndexRedirect to   default-path    gt   lt Route path   default-path  component  DefaultComponent    gt    This is based on react-router 1 0 0  See https   github com rackt react-router blob master modules IndexRedirect js

User · Answer

The problem with using  lt Redirect from     to  searchDashboard    gt  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    lt Route exact path     render       gt         lt Redirect to   searchDashboard   gt      gt    Use this if searchDashboard is behind login    lt Route exact path     render       gt      loggedIn          lt Redirect to   searchDashboard   gt               lt Redirect to   login   gt          gt

User · Answer

UPDATE   2020  Instead of using Redirect  Simply add multiple route in the path  Example     lt Route exact path         defaultPath    component  searchDashboard    gt

User · Answer

import   Route  Redirect   from  react-router-dom    class App extends Component     render         return          lt div gt           lt Route path     gt             lt Redirect to   something    gt           lt  Route gt    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

[javascript] How to set the DefaultRoute to another Route in React Router

Examples related to javascript

Examples related to routes

Examples related to reactjs

Examples related to url-redirection

Examples related to react-router