web-dev-qa-db-fra.com

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

J'ai le suivant:

  <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 n'est pas correctement rendu car tout * Dashboard doit être rendu dans Dashboard.

Je souhaite que ma route DefaultRoute dans l'application "Route" pointe sur la route "Tableau de recherche". Est-ce quelque chose que je peux faire avec React Router, ou devrais-je utiliser du Javascript normal (pour une page de redirection) pour cela? 

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

javascriptroutesreactjsurl-redirectionreact-router
51
Matthew Herbst

Vous pouvez utiliser Redirect au lieu de DefaultRoute

<Redirect from="/" to="searchDashboard" />
75
Jonatan Lundqvist Medén

J'essayais de manière incorrecte 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 appelez des éléments <Link/> 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) consiste à 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 .

37
Seth

Le problème lié à l'utilisation de <Redirect from="/" to="searchDashboard" /> est que si vous avez une URL différente, par exemple /indexDashboard et que l'utilisateur clique sur rafraîchir ou se fait envoyer une URL, l'utilisateur sera redirigé vers /searchDashboard de toute façon.

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

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

Utilisez ceci si searchDashboard est derrière la connexion:

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

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

<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

9
dwilt

Pour ceux qui entrent 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>
3
Kevin Hernandez
 <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>
2
user3889017

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

Vous l'utilisez comme ceci (tiré des documents de routeur de réaction liés ci-dessus):

<Route path="/" component={App}>
    <IndexRedirect to="/welcome" />
    <Route path="welcome" component={Welcome} />
    <Route path="about" component={About} />
</Route>
1
Marc Costello
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 chargez le serveur sur l'hôte local, il vous redirigera vers/quelque chose 

1
user2785628

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

Ma solution consiste à utiliser un caractère générique comme valeur de chemin. Par exemple, assurez-vous que c'est la dernière entrée de votre définition de routes.

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