React-Router: Rute Tidak Ditemukan?

Pertimbangkan hal berikut:

var AppRoutes = [
    <Route handler={App} someProp="defaultProp">
        <Route path="/" handler={Page} />
    </Route>,

    <Route  handler={App} someProp="defaultProp">
        <Route path="/" handler={Header} >
            <Route path="/withheader" handler={Page} />
        </Route>
    </Route>,

    <Route handler={App} someProp="defaultProp">
        <Route path=":area" handler={Area} />
        <Route path=":area/:city" handler={Area} />
        <Route path=":area/:city/:locale" handler={Area} />
        <Route path=":area/:city/:locale/:type" handler={Area} />
    </Route>
];

Saya memiliki Templat Aplikasi, HeaderTemplate, dan kumpulan rute Parameterized dengan penangan yang sama (dalam template Aplikasi). Saya ingin bisa melayani 404 rute ketika sesuatu tidak ditemukan. Misalnya, / CA / SanFrancisco harus ditemukan dan ditangani berdasarkan Area, sedangkan / SanFranciscoz harus 404.

Inilah cara saya menguji rute dengan cepat.

['', '/', '/withheader', '/SanFranciscoz', '/ca', '/CA', '/CA/SanFrancisco', '/CA/SanFrancisco/LowerHaight', '/CA/SanFrancisco/LowerHaight/condo'].forEach(function(path){
    Router.run(AppRoutes, path, function(Handler, state){
        var output = React.renderToString(<Handler/>);
        console.log(output, '\n');
    });
});

Masalahnya adalah / SanFranciscoz selalu ditangani oleh halaman Area, tetapi saya menginginkannya ke 404. Juga, jika saya menambahkan NotFoundRoute ke konfigurasi rute pertama, semua halaman Area 404.

<Route handler={App} someProp="defaultProp">
    <Route path="/" handler={Page} />
    <NotFoundRoute handler={NotFound} />
</Route>,

Apa yang saya lakukan salah?

Berikut adalah inti yang dapat diunduh dan diujicobakan.

https://gist.github.com/adjavaherian/aa48e78279acddc25315

DefaultRoute dan NotFoundRoute telah dihapus di react-router 1.0.0.

Saya ingin menekankan bahwa rute default dengan tanda bintang harus yang terakhir di tingkat hierarki saat ini agar berfungsi. Jika tidak, ini akan menimpa semua rute lain yang muncul setelahnya di pohon karena ini pertama dan cocok dengan setiap jalur.

Untuk react-router 1, 2 dan 3

Jika Anda ingin menampilkan 404 dan mempertahankan jalur (Fungsionalitas yang sama seperti NotFoundRoute)

<Route path='*' exact={true} component={My404Component} />

Jika Anda ingin menampilkan halaman 404 tetapi mengubah url (Fungsionalitas yang sama seperti DefaultRoute)

<Route path='/404' component={My404Component} />
<Redirect from='*' to='/404' />

Contoh dengan banyak tingkatan:

<Route path='/' component={Layout} />
    <IndexRoute component={MyComponent} />
    <Route path='/users' component={MyComponent}>
        <Route path='user/:id' component={MyComponent} />
        <Route path='*' component={UsersNotFound} />
    </Route>
    <Route path='/settings' component={MyComponent} />
    <Route path='*' exact={true} component={GenericNotFound} />
</Route>

Untuk react-router 4 dan 5

Pertahankan jalannya

<Switch>
    <Route exact path="/users" component={MyComponent} />
    <Route component={GenericNotFound} />
</Switch>

Alihkan ke rute lain (ubah url)

<Switch>
    <Route path="/users" component={MyComponent} />
    <Route path="/404" component={GenericNotFound} />
    <Redirect to="/404" />
</Switch>

Urutan penting!

Dalam versi react-router yang lebih baru, Anda ingin menggabungkan rute di Switch yang hanya menampilkan komponen pertama yang cocok. Jika tidak, Anda akan melihat beberapa komponen dirender.

Sebagai contoh:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  browserHistory,
  Switch
} from 'react-router-dom';

import App from './app/App';
import Welcome from './app/Welcome';
import NotFound from './app/NotFound';

const Root = () => (
  <Router history={browserHistory}>
    <Switch>
      <Route exact path="/" component={App}/>
      <Route path="/welcome" component={Welcome}/>
      <Route component={NotFound}/>
    </Switch>
  </Router>
);

ReactDOM.render(
  <Root/>,
  document.getElementById('root')
);

Dengan versi baru React Router (sekarang menggunakan 2.0.1), Anda dapat menggunakan tanda bintang sebagai jalur untuk merutekan semua 'jalur lain'.

Jadi akan terlihat seperti ini:

<Route route="/" component={App}>
    <Route path=":area" component={Area}>
        <Route path=":city" component={City} />
        <Route path=":more-stuff" component={MoreStuff} />    
    </Route>
    <Route path="*" component={NotFoundRoute} />
</Route>

Jawaban ini untuk react-router-4. Anda dapat menggabungkan semua rute dalam blok Switch, yang berfungsi seperti ekspresi kasus sakelar, dan membuat komponen dengan rute pertama yang cocok. misalnya)

<Switch>
      <Route path="/" component={home}/>
      <Route path="/home" component={home}/>
      <Route component={GenericNotFound}/> {/* The Default not found component */}
</Switch>

Kapan digunakan exact

Tanpa tepat:

<Route path='/home'
       component = {Home} />

{/* This will also work for cases like https://<domain>/home/anyvalue. */}

Dengan tepat:

<Route exact path='/home'
       component = {Home} />

{/* 
     This will NOT work for cases like https://<domain>/home/anyvalue. 
     Only for https://<url>/home and https://<domain>/home/
*/}

Sekarang jika Anda menerima parameter perutean, dan jika ternyata salah, Anda dapat menanganinya di komponen target itu sendiri. misalnya)

<Route exact path='/user/:email'
       render = { (props) => <ProfilePage {...props} user={this.state.user} />} />

Sekarang di ProfilePage.js

if(this.props.match.params.email != desiredValue)
{
   <Redirect to="/notFound" component = {GenericNotFound}/>
   //Or you can show some other component here itself.
}

Untuk lebih jelasnya Anda bisa melalui kode ini:

App.js

ProfilePage.js

Menurut dokumentasi , rute itu ditemukan, meskipun sumber daya itu tidak.

Catatan : Ini tidak dimaksudkan untuk digunakan ketika sumber daya tidak ditemukan. Ada perbedaan antara router tidak menemukan jalur yang cocok dan URL valid yang menyebabkan sumber daya tidak ditemukan. Kursus url / 123 adalah url yang valid dan menghasilkan rute yang cocok, oleh karena itu "ditemukan" sejauh menyangkut perutean. Kemudian, jika kita mengambil beberapa data dan menemukan bahwa jalur 123 tidak ada, kita tidak ingin berpindah ke rute baru. Sama seperti di server, Anda melanjutkan dan menyajikan url tetapi membuat UI yang berbeda (dan menggunakan kode status yang berbeda). Anda tidak boleh mencoba beralih ke NotFoundRoute.

Jadi, Anda selalu dapat menambahkan baris di Router.run()before React.render()untuk memeriksa apakah sumber daya valid. Cukup teruskan prop ke komponen atau ganti Handlerkomponen dengan yang khusus untuk menampilkan tampilan NotFound.

Saya baru saja melihat sekilas contoh Anda, tetapi jika saya memahaminya dengan cara yang benar, Anda mencoba menambahkan rute 404 ke segmen dinamis. Saya mengalami masalah yang sama beberapa hari yang lalu, menemukan # 458 dan # 1103 dan berakhir dengan pemeriksaan tangan dalam fungsi render:

if (!place) return <NotFound />;

semoga membantu!