Jak ustawić DefaultRoute na inną trasę w React Router

Mam:

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

Podczas korzystania z DefaultRoute SearchDashboard renderuje się nieprawidłowo, ponieważ każdy * Dashboard musi być renderowany w Dashboard.

Chciałbym, aby moja DefaultRoute w „app” Route wskazywała na Route „searchDashboard”. Czy to jest coś, co mogę zrobić z React Router, czy powinienem do tego użyć zwykłego JavaScript (do przekierowania strony)?

Zasadniczo, jeśli użytkownik przejdzie na stronę główną, chcę wysłać go zamiast tego do panelu wyszukiwania. Myślę więc, że szukam funkcji React Router odpowiadającejwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

Możesz użyć przekierowania zamiast DefaultRoute

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

Zaktualizuj 2019-08-09, aby uniknąć problemu z odświeżaniem, użyj tego zamiast tego, dzięki Ogglas

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

Problem z używaniem <Redirect from="/" to="searchDashboard" />polega na tym, że jeśli masz inny adres URL, powiedzmy, /indexDashboarda użytkownik odświeży się lub otrzyma wysłany do niego adres URL, użytkownik i tak zostanie przekierowany na /searchDashboard.

Jeśli nie chcesz, aby użytkownicy mogli odświeżyć witrynę lub wysyłać adresy URL, użyj tego:

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

Użyj tego, jeśli searchDashboardjest za logowaniem:

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

Niepoprawnie próbowałem utworzyć domyślną ścieżkę z:

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

Ale to tworzy dwie różne ścieżki, które renderują ten sam komponent. Nie tylko jest to bezcelowe, ale może powodować usterki w interfejsie użytkownika, np. Podczas stylizacji <Link/>elementów na podstawie this.history.isActive().

Właściwym sposobem utworzenia trasy domyślnej (która nie jest trasą indeksu) jest użycie <IndexRedirect/>:

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

Jest to oparte na react-router 1.0.0. Zobacz https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js .

Odpowiedź Jonathana wydawała się nie działać dla mnie. Używam React v0.14.0 i React Router v1.0.0-rc3. To zrobiło:

<IndexRoute component={Home}/>.

Więc w przypadku Matthew myślę, że chciałby:

<IndexRoute component={SearchDashboard}/>.

Źródło: 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

sprawi to, że po załadowaniu serwera na lokalnym hoście przekieruje cię do / czegoś

AKTUALIZACJA : 2020

Zamiast używać przekierowania, po prostu dodaj wiele tras w pliku path

Przykład:

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

Natknąłem się na podobny problem; Chciałem domyślnego programu obsługi trasy, jeśli żaden z programów obsługi trasy nie pasuje.

Moje rozwiązanie polega na użyciu symbolu wieloznacznego jako wartości ścieżki. tj. upewnij się również, że jest to ostatni wpis w twojej definicji tras.

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

Dla tych, którzy przyjdą w 2017 roku, jest to nowe rozwiązanie z 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>

Preferowaną metodą jest użycie komponentu React router IndexRoutes

Używasz go w ten sposób (pobrane z dokumentów React routera, do których link znajduje się powyżej):

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

Używasz go w ten sposób, aby przekierować na określony adres URL i renderować komponent po przekierowaniu ze starego routera na nowy router.

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