javascript - link - Cómo configurar la ruta predeterminada a otra ruta en React Router

react router using params

Question

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>

Al usar DefaultRoute, SearchDashboard se procesa incorrectamente ya que cualquier * Dashboard debe procesarse dentro de Dashboard.

Me gustaría que mi ruta predeterminada dentro de la ruta de la "aplicación" apunte al "tablero de búsqueda" de la ruta. ¿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 enviarlos al panel de búsqueda. Así que supongo que estoy buscando una función React Router equivalente a window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

Answer 1

El método preferido es usar el componente IndexRoutes router de IndexRoutes

Lo usa de esta manera (tomado de los documentos de enrutador de reacción vinculados anteriormente):

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

Answer 2

El problema con el uso de <Redirect from="/" to="searchDashboard" /> es que si tiene una URL diferente, digamos /indexDashboard y el usuario hace /indexDashboard en actualizar o recibe una URL, el usuario será redirigido a /searchDashboard de todas formas.

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

Answer 3

Intenté incorrectamente crear una ruta predeterminada con:

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

Pero esto crea dos caminos 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á this.history.isActive() elementos <Link/> basados ​​en this.history.isActive() .

La forma correcta de crear una ruta predeterminada (que no es la ruta de índice) es usar <IndexRedirect/> :

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

Esto se basa en react-router 1.0.0. Ver https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js .

Answer 4

La respuesta de Jonathan no pareció funcionar para mí. Estoy usando React v0.14.0 y React Router v1.0.0-rc3. Esto hizo:

<IndexRoute component={Home}/> .

Entonces, en el caso de Matthew, creo que querría:

<IndexRoute component={SearchDashboard}/> .

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

Answer 5

Me encontré con un problema similar; Quería un controlador de ruta predeterminado si ninguno de los controladores de ruta coincidía.

Mi solución es usar un comodín como valor de ruta. es decir, también asegúrese de que sea la última entrada en su definición de rutas.

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

Answer 6

Para aquellos que vienen en 2017, esta es la nueva solución con IndexRedirect :

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

Answer 7

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

Answer 8

import { Route, Redirect } from "react-router-dom";
class App extends Component {
render() {
return (
<div>
<Route path=''/''>
<Redirect to="/something" />
</Route>
//rest of code here

esto hará que cuando cargue el servidor en el host local lo redireccionará a / algo

Answer 9

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