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


98

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


1
Czy próbowałeś użyć przekierowania zamiast DefaultRoute? <Redirect from = "/" to = "searchDashboard" />
Jonatan Lundqvist Medén

@ JonatanLundqvistMedén właśnie tego szukałem, dziękuję! Napisz to jako odpowiedź, a zaznaczę ją jako poprawną. Przepraszam za spóźnioną odpowiedź.
Matthew Herbst

Odpowiedzi:


152

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

6
czy to tylko ja, czy też gdy używam tego do bezpośredniego trafienia na głęboki adres URL, zawsze jestem przekierowywany do adresu URL „do” zamiast trasy, którą próbuję trafić?
Pablote

Należy zauważyć, że jeśli wykonujesz jakieś przekierowanie from='/a' to='/a/:id', będziesz musiał użyć <Switch>do dołączenia swojego <Redirect>i <Route>komponentu zreak-routera. Szczegóły patrz dokument
Kulbear

1
@Kulbear Miałem ten sam problem. To, co powiedział Ogglas w swojej odpowiedzi, działało.
Alan P.

2
Aby to zadziałało, najprawdopodobniej musisz umieścić tę trasę jako ostatnią lub zrobić to<Redirect exact from="/" to="/adaptation" />
Aleksei Poliakov

Łatwo to przeoczyć, więc powtarzam: ważną częścią reguły przekierowania DarkWalkera jest exactflaga. Brakuje odpowiedzi acceptet, więc pasuje ona [prawie] do każdej trasy.
dube

56

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

37

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 .


Jaki jest sens mieć Routedo czegoś, co jest już obsługiwane przez Ciebie IndexRoute?
Matthew Herbst

1
Nie ma sensu, więc zredagowałem odpowiedź, aby było jasne, że tego nie popieram.
Seth

To właśnie robiłem, ale chciałbym rozwiązanie, które wyświetla komponent (moją stronę główną) /zamiast przekierowywania do np /home.
ericsoco

Wygląda na to, że w końcu szukam <IndexRoute>. Przepraszam za hałas. stackoverflow.com/questions/32706913/… github.com/reactjs/react-router/blob/master/docs/guides/…
ericsoco

11

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


Dzięki za udostępnienie. Używałem do tego React v0.13 i wersji React-Router, a więc wersji wcześniejszej niż 1.0 / rc. Mam nadzieję, że to pomoże innym!
Matthew Herbst

Myślę, że to sprawia, że ​​tracisz kontekst. SearchDashboardbędzie komponentem, który zobaczysz po dotarciu na stronę główną, ale nie tym Dashboard, który ją opakowuje, jeśli przejdziesz bezpośrednio do /dashboard/searchDashboard. React-router dynamicznie buduje hierarchię zagnieżdżonych komponentów na podstawie tras dopasowanych do adresu URL, więc myślę, że naprawdę potrzebujesz tutaj przekierowania.
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

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


5

AKTUALIZACJA : 2020

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

Przykład:

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

3

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>

3

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>

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>

Co jest odpowiednikiem DefaultRoutew react-routerwersji 4?
Anthony Kong

4
@AnthonyKong myślę, to jest: <Route exact path="/" component={Home}/>. reaktraining.com/react-router/web/example/basic
TYMG

1

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>

0

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>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.