tengo lo siguiente:
<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>Cuando se usa DefaultRoute, SearchDashboard se representa incorrectamente ya que cualquier *Dashboard debe representarse dentro de Dashboard.
Me gustaría que mi DefaultRoute dentro de la ruta de la "aplicación" apunte a la ruta "searchDashboard". ¿Es esto algo que puedo hacer con React Router, o debería usar Javascript normal (para una redirección de página) para esto?
Básicamente, si el usuario va a la página de inicio, quiero enviarlo al panel de búsqueda. Así que supongo que estoy buscando una función de React Router equivalente a window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");
Puede usar Redirect en lugar de DefaultRoute
<Redirect from="/" to="searchDashboard" />Actualice 2019-08-09 para evitar problemas con la actualización, use esto en su lugar, gracias a Ogglas
<Redirect exact from="/" to="searchDashboard" />Fuente:
Actualizar:
Para v6 puedes hacerlo así con Navigate . Puede utilizar una ruta de "no coincidencia" para gestionar los casos de "no coincidencia".
<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:
El problema con el uso de <Redirect from="/" to="searchDashboard" /> es que si tiene una URL diferente, digamos /indexDashboard y el usuario pulsa actualizar o recibe una URL enviada, el usuario será redirigido a /searchDashboard de todas formas.
Si no desea que los usuarios puedan actualizar el sitio o enviar URL, use esto:
<Route exact path="/" render={() => ( <Redirect to="/searchDashboard"/> )}/> Use esto si searchDashboard está detrás del inicio de sesión:
<Route exact path="/" render={() => ( loggedIn ? ( <Redirect to="/searchDashboard"/> ) : ( <Redirect to="/login"/> ) )}/>Estaba tratando incorrectamente de crear una ruta predeterminada con:
<IndexRoute component={DefaultComponent} /> <Route path="/default-path" component={DefaultComponent} /> Pero esto crea dos rutas diferentes que representan el mismo componente. Esto no solo no tiene sentido, sino que puede causar fallas en su interfaz de usuario, es decir, cuando está diseñando elementos <Link/> basados en this.history.isActive() .
La forma correcta de crear una ruta predeterminada (que no sea la ruta de índice) es usar <IndexRedirect/> :
<IndexRedirect to="/default-path" /> <Route path="/default-path" component={DefaultComponent} />Esto se basa en el enrutador de reacción 1.0.0. Consulte https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js .