Comment configurer la DefaultRoute sur une autre Route dans le routeur React

j'ai été incorrectement en essayant de créer un chemin d'accès par défaut:

<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 n'a pas de sens, mais cela peut causer des problèmes dans votre interface utilisateur, c'est-à-dire lorsque vous avez un style <Link/> en fonction de this.history.isActive().

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

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

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

Le problème avec l'aide de <Redirect from="/" to="searchDashboard" /> si vous avez une URL différente, dites /indexDashboard et que l'utilisateur appuie sur actualiser ou obtient une URL envoyé, l'utilisateur sera redirigé vers /searchDashboard de toute façon.

Si vous voulez pas que les utilisateurs soient capables d'actualiser le site ou envoyer une Url utiliser ceci:

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

utilisez ceci si searchDashboard est derrière login:

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

<IndexRoute component={Home}/>.

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

<IndexRoute component={SearchDashboard}/>.

Pour ceux qui viennent en 2017, c'est 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 est d'utiliser le routeur react IndexRoutes composant

Vous l'utilisez comme ceci (tiré du routeur react docs lié ci-dessus):

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

j'ai rencontré un problème similaire, je voulais une route par défaut, le gestionnaire si aucun gestionnaire d'itinéraire de correspondance.

mes solutions consistent à utiliser un caractère de remplacement comme valeur de chemin. IE Assurez-vous également que c'est la dernière entrée dans vos itinéraires de définition.

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

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 ré vous diriger vers /quelque chose