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


98

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


1
Avez-vous essayé d'utiliser Redirect au lieu de DefaultRoute? <Redirect from = "/" to = "searchDashboard" />
Jonatan Lundqvist Medén

@ JonatanLundqvistMedén c'est exactement ce que je cherchais, merci! Écrivez-la comme réponse et je la marquerai comme correcte. Désolé pour la réponse tardive.
Matthew Herbst

Réponses:


148

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

6
est-ce juste moi, ou lorsque je l'utilise pour frapper directement une URL profonde, je suis toujours redirigé vers l'url "vers", au lieu de la route que j'essaie d'atteindre?
Pablote

Il convient de noter que si vous effectuez une redirection comme from='/a' to='/a/:id', vous devrez utiliser <Switch>pour inclure votre composant <Redirect>et <Route>de react-router. Détails voir doc
Kulbear

1
@Kulbear J'ai eu le même problème. Faire ce qu'Ogglas a dit dans sa réponse a fonctionné.
Alan P.

2
Pour que cela fonctionne, vous devez probablement mettre cet itinéraire en dernier ou faire ceci<Redirect exact from="/" to="/adaptation" />
DarkWalker

Il est facile de le superviser, alors je le répète: la partie importante de la règle de redirection de DarkWalker est le exactdrapeau. La réponse d'acceptation est manquante, donc elle correspond à [presque] n'importe quelle route.
dube

55

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

37

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 .


Quel est l'intérêt d'avoir un Routeà quelque chose qui est déjà géré par votre IndexRoute?
Matthew Herbst

1
Cela ne sert à rien, et j'ai modifié ma réponse pour indiquer clairement que je ne préconisais pas cela.
Seth

C'est ce que j'ai fait aussi, mais j'aimerais une solution qui sert un composant (ma page d'accueil) au /lieu d'avoir à rediriger vers par exemple /home.
ericsoco

On dirait que je cherche <IndexRoute>après tout. Désolé pour le bruit. stackoverflow.com/questions/32706913/… github.com/reactjs/react-router/blob/master/docs/guides/…
ericsoco

11

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


Merci pour le partage. J'utilisais React v0.13 et la version de React-Router pour cela, donc une version antérieure à 1.0 / rc. J'espère que cela aide les autres!
Matthew Herbst

Je pense que cela vous fait perdre le contexte. SearchDashboardsera le composant que vous verrez lorsque vous arrivez sur la page d'accueil, mais pas le Dashboardcomposant qui l'encapsule si vous accédez directement à /dashboard/searchDashboard. React-router construit dynamiquement une hiérarchie de composants imbriqués en fonction des routes correspondant à l'URL, donc je pense que vous avez vraiment besoin d'une redirection ici.
Stijn de Witt

6
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


5

MISE À JOUR : 2020

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

Exemple:

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

3

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>

3

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>

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

Quel est équivalent DefaultRouteà react-routerv4?
Anthony Kong

4
@AnthonyKong Je pense qu'il est: <Route exact path="/" component={Home}/>. reacttraining.com/react-router/web/example/basic
TYMG

1

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>

0

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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.