Comment définir le DefaultRoute sur une autre route dans React Router

J'ai ce qui suit:

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

Lors de l'utilisation de DefaultRoute, SearchDashboard effectue un rendu incorrect car tout * Dashboard doit être rendu dans Dashboard.

Je voudrais que mon DefaultRoute dans le "App" Route pour pointer vers la Route "searchDashboard". Est-ce quelque chose que je peux faire avec React Router, ou devrais-je utiliser du Javascript normal (pour une redirection de page) pour cela?

Fondamentalement, si l'utilisateur accède à la page d'accueil, je souhaite plutôt l'envoyer au tableau de bord de recherche. Je suppose donc que je recherche une fonctionnalité de React Router équivalente àwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

Vous pouvez utiliser Redirect au lieu de DefaultRoute

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

Mettez à jour le 09/08/2019 pour éviter les problèmes d'actualisation, utilisez plutôt ceci, grâce à Ogglas

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

Le problème avec l'utilisation <Redirect from="/" to="searchDashboard" />est que si vous avez une URL différente, par exemple /indexDashboardet que l'utilisateur clique sur actualiser ou reçoit une URL qui lui est envoyée, l'utilisateur sera de /searchDashboardtoute façon redirigé vers .

Si vous ne voulez pas que les utilisateurs puissent actualiser le site ou envoyer des URL, utilisez ceci:

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

Utilisez ceci si searchDashboardest derrière la connexion:

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

J'essayais à tort de créer un chemin par défaut avec:

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

Mais cela crée deux chemins différents qui rendent le même composant. Non seulement cela est inutile, mais cela peut causer des problèmes dans votre interface utilisateur, c'est-à-dire lorsque vous stylisez des <Link/>éléments en fonction de this.history.isActive().

La bonne façon de créer une route par défaut (qui n'est pas la route d'index) est d'utiliser <IndexRedirect/>:

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

Ceci est basé sur react-router 1.0.0. Voir https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js .

La réponse de Jonathan ne semblait pas fonctionner pour moi. J'utilise React v0.14.0 et React Router v1.0.0-rc3. Cela a fait:

<IndexRoute component={Home}/>.

Donc, dans le cas de Matthew, je crois qu'il voudrait:

<IndexRoute component={SearchDashboard}/>.

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

import { Route, Redirect } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div>
        <Route path='/'>
          <Redirect to="/something" />
        </Route>
//rest of code here

cela fera en sorte que lorsque vous chargerez le serveur sur l'hôte local, il vous dirigera vers / quelque chose

MISE À JOUR : 2020

Au lieu d'utiliser la redirection, ajoutez simplement plusieurs routes dans le path

Exemple:

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

J'ai rencontré un problème similaire; Je voulais un gestionnaire d'itinéraire par défaut si aucun des gestionnaires d'itinéraire ne correspondait.

Mes solutions consistent à utiliser un caractère générique comme valeur de chemin. c.-à-d. Assurez-vous également qu'il s'agit de la dernière entrée dans la définition de votre itinéraire.

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

Pour ceux qui arrivent en 2017, voici la nouvelle solution avec IndexRedirect:

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

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

La méthode préférée consiste à utiliser le composant IndexRoutes du routeur de réaction

Vous l'utilisez comme ceci (extrait de la documentation du routeur de réaction liée ci-dessus):

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

Vous l'utilisez comme ceci pour rediriger sur une URL particulière et rendre le composant après la redirection de l'ancien routeur vers le nouveau routeur.

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