Cara mengatur DefaultRoute ke Route lain di React Router

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

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

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

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 .

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

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

PEMBARUAN : 2020

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

Contoh:

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

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>

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>

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

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>

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>