Cara mengatur DefaultRoute ke Route lain di React Router


98

Saya memiliki yang berikut ini:

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

Saat menggunakan DefaultRoute, SearchDashboard salah merender karena Dasbor * apa pun perlu dirender dalam Dasbor.

Saya ingin agar DefaultRoute saya berada dalam Rute "app" untuk mengarah ke Rute "searchDashboard". Apakah ini sesuatu yang dapat saya lakukan dengan React Router, atau haruskah saya menggunakan Javascript normal (untuk pengalihan halaman) untuk ini?

Pada dasarnya, jika pengguna membuka halaman beranda, saya ingin mengirimnya ke dasbor pencarian. Jadi saya rasa saya sedang mencari fitur React Router yang setara denganwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");


1
Sudahkah Anda mencoba menggunakan Pengalihan alih-alih DefaultRoute? <Redirect from = "/" to = "searchDashboard" />
Jonatan Lundqvist Medén

@ JonatanLundqvistMedén itulah yang saya cari, terima kasih! Tulislah sebagai jawaban dan saya akan menandainya sebagai benar. Maaf atas tanggapan yang tertunda.
Matthew Herbst

Jawaban:


150

Anda dapat menggunakan Redirect sebagai ganti DefaultRoute

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

Perbarui 2019-08-09 untuk menghindari masalah dengan penyegaran, gunakan ini sebagai gantinya, terima kasih kepada Ogglas

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

6
apakah hanya saya, atau saat menggunakan ini untuk membuka url yang dalam secara langsung, saya selalu dialihkan ke url "ke", alih-alih ke rute yang saya coba tuju?
Pablote

Harus diperhatikan bahwa jika Anda melakukan pengalihan seperti from='/a' to='/a/:id', Anda perlu menggunakan <Switch>untuk memasukkan komponen <Redirect>dan Anda <Route>dari react-router. Detail lihat dok
Kulbear

1
@Kuliah Saya punya masalah yang sama. Melakukan apa yang dikatakan Ogglas dalam jawabannya berhasil.
Alan P.

2
Untuk membuatnya berhasil, Anda kemungkinan besar harus meletakkan rute ini terakhir atau melakukan ini<Redirect exact from="/" to="/adaptation" />
DarkWalker

Sangat mudah untuk mengawasinya, jadi saya ulangi: Bagian penting dari aturan Pengalihan DarkWalker adalah exactbenderanya. Jawaban acceptet tidak ada, sehingga cocok dengan [hampir] rute manapun.
dube

56

Masalah dengan penggunaan <Redirect from="/" to="searchDashboard" />adalah jika Anda memiliki URL yang berbeda, katakanlah /indexDashboarddan pengguna menekan segarkan atau mendapatkan URL yang dikirim kepada mereka, pengguna akan tetap diarahkan ke sana /searchDashboard.

Jika Anda tidak ingin pengguna menyegarkan situs atau mengirim URL gunakan ini:

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

Gunakan ini jika searchDashboardberada di belakang login:

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

37

Saya salah mencoba membuat jalur default dengan:

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

Tapi ini menciptakan dua jalur berbeda yang merender komponen yang sama. Hal ini tidak hanya tidak berguna, tetapi juga dapat menyebabkan gangguan pada UI Anda, yaitu saat Anda menata <Link/>elemen berdasarkan this.history.isActive().

Cara yang benar untuk membuat rute default (itu bukan rute indeks) adalah dengan menggunakan <IndexRedirect/>:

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

Ini didasarkan pada react-router 1.0.0. Lihat https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js .


Apa gunanya memiliki Routesesuatu yang sudah ditangani oleh Anda IndexRoute?
Matthew Herbst

1
Tidak ada gunanya, dan saya mengedit jawaban saya untuk memperjelas bahwa saya tidak menganjurkan hal itu.
Seth

Ini juga yang telah saya lakukan, tetapi saya ingin solusi yang menyajikan komponen (beranda saya) /daripada harus dialihkan ke mis /home.
ericsoco

Sepertinya aku sedang mencari <IndexRoute>. Maaf atas kebisingannya. stackoverflow.com/questions/32706913/… github.com/reactjs/react-router/blob/master/docs/guides/…
ericsoco

11

Jawaban Jonathan sepertinya tidak berhasil untukku. Saya menggunakan React v0.14.0 dan React Router v1.0.0-rc3. Ini dilakukan:

<IndexRoute component={Home}/>.

Jadi dalam Kasus Matthew, saya yakin dia ingin:

<IndexRoute component={SearchDashboard}/>.

Sumber: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md


Terima kasih untuk bagiannya. Saya menggunakan React v0.13 dan versi React-Router untuk itu, jadi versi pra-1.0 / rc. Semoga ini bisa membantu orang lain!
Matthew Herbst

Saya pikir ini membuat Anda kehilangan konteks. SearchDashboardakan menjadi komponen yang akan Anda lihat saat Anda tiba di beranda, tetapi bukan Dashboardkomponen yang membungkusnya jika Anda langsung membuka /dashboard/searchDashboard. React-router secara dinamis membangun hierarki komponen bersarang berdasarkan rute yang cocok dengan URL, jadi saya pikir Anda benar-benar membutuhkan pengalihan di sini.
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

ini akan membuatnya ketika Anda memuat server pada host lokal itu akan mengarahkan Anda kembali ke / sesuatu


5

PEMBARUAN : 2020

Alih-alih menggunakan Redirect, Cukup tambahkan beberapa rute di path

Contoh:

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

3

Saya mengalami masalah serupa; Saya ingin pengendali rute default jika tidak ada pengendali rute yang cocok.

Solusi saya adalah menggunakan wildcard sebagai nilai jalur. yaitu Pastikan juga itu adalah entri terakhir dalam definisi rute Anda.

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

3

Bagi mereka yang memasuki tahun 2017, ini adalah solusi baru dengan 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>

Apa yang setara dengan DefaultRoutedi react-routerv4?
Anthony Kong

4
@AnthonyKong Saya pikir itu adalah: <Route exact path="/" component={Home}/>. reacttraining.com/react-router/web/example/basic
TYMG

1

Metode yang disukai adalah dengan menggunakan komponen IndexRoutes react router

Anda menggunakannya seperti ini (diambil dari dokumen react router yang ditautkan di atas):

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

0

Anda menggunakannya seperti ini untuk mengalihkan pada URL tertentu dan membuat komponen setelah mengalihkan dari router lama ke router baru.

<Route path="/old-router">
  <Redirect exact to="/new-router"/>
  <Route path="/new-router" component={NewRouterType}/>
</Route>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.