React-Router: Rota Bulunamadı mı?

Aşağıdakileri göz önünde bulundur:

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

Aynı işleyiciye (Uygulama şablonunda) sahip bir Uygulama Şablonum, bir BaşlıkTemplate ve Parametreli yol kümesine sahibim. Bir şey bulunamadığında 404 rotaya hizmet edebilmek istiyorum. Örneğin, / CA / SanFrancisco Area tarafından bulunmalı ve işlenmelidir, oysa / SanFranciscoz 404 olmalıdır.

Rotaları nasıl hızlı bir şekilde test ettiğim burada.

['', '/', '/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');
    });
});

Sorun, / SanFranciscoz'un her zaman Alan sayfası tarafından ele alınmasıdır, ancak ben 404'e olmasını istiyorum. Ayrıca, ilk rota yapılandırmasına bir NotFoundRoute eklersem, tüm Bölge sayfaları 404.

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

Neyi yanlış yapıyorum?

İşte indirilebilecek ve üzerinde deney yapılabilecek bir özet.

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

DefaultRoute ve NotFoundRoute, react-router 1.0.0'da kaldırılmıştır.

Geçerli hiyerarşi seviyesinin çalışması için yıldız işaretli varsayılan yolun son olması gerektiğini vurgulamak isterim . Aksi takdirde, ağaçta kendisinden sonra görünen diğer tüm yolları geçersiz kılar çünkü bu ilktir ve her yolla eşleşir.

React-router 1, 2 ve 3 için

Bir 404 görüntülemek ve yolu korumak istiyorsanız (NotFoundRoute ile aynı işlevsellik)

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

Bir 404 sayfası görüntülemek istiyor ancak url'yi değiştirmek istiyorsanız (DefaultRoute ile aynı işlevsellik)

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

Birden çok seviyeli örnek:

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

React-router 4 ve 5 için

Yolu koru

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

Başka bir rotaya yönlendir (url'yi değiştir)

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

Sıra önemlidir!

React-router'ın daha yeni sürümlerinde , yolları yalnızca ilk eşleşen bileşeni oluşturan bir Switch'e sarmak istersiniz . Aksi takdirde birden çok bileşenin işlendiğini görürsünüz.

Örneğin:

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

React Router'ın yeni sürümü ile (şimdi 2.0.1 kullanılıyor), tüm 'diğer yolları' yönlendirmek için bir yol olarak bir yıldız işareti kullanabilirsiniz.

Yani şöyle görünecektir:

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

Bu cevap, react-router-4 içindir. Anahtar-durum ifadesi gibi çalışan ve bileşeni ilk eşleşen yolla işleyen Anahtar bloğundaki tüm yolları sarabilirsiniz. Örneğin)

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

Ne zaman kullanılmalı exact

Kesin olmadan:

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

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

Kesin olarak:

<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/
*/}

Şimdi, yönlendirme parametrelerini kabul ediyorsanız ve yanlış çıkarsa, bunu hedef bileşenin kendisinde halledebilirsiniz. Örneğin)

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

Şimdi ProfilePage.js'de

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

Daha fazla ayrıntı için bu kodu inceleyebilirsiniz:

App.js

ProfilePage.js

Göre belgeler , rota oldu kaynak olmadığı halde buldu.

Not : Bu, bir kaynak bulunamadığında kullanılmak üzere tasarlanmamıştır. Yönlendiricinin eşleşen bir yol bulamaması ile bir kaynağın bulunamamasına neden olan geçerli bir URL arasında bir fark vardır. Url kursları / 123 geçerli bir url'dir ve eşleşen bir yolla sonuçlanır, bu nedenle yönlendirme söz konusu olduğunda "bulundu". Daha sonra, bazı verileri alırsak ve 123 rotasının olmadığını keşfedersek, yeni bir rotaya geçmek istemeyiz. Tıpkı sunucuda olduğu gibi, devam edin ve url'yi sunar, ancak farklı bir UI oluşturur (ve farklı bir durum kodu kullanırsınız). Hiçbir zaman bir NotFoundRoute'a geçiş yapmayı denememelisiniz.

Dolayısıyla, kaynağın geçerli olup olmadığını kontrol etmek için her zaman Router.run()öncesine bir satır ekleyebilirsiniz React.render(). HandlerNotFound görünümünü görüntülemek için bileşene bir destek vermeniz veya bileşeni özel bir bileşenle geçersiz kılmanız yeterlidir.

Örneğinize hızlıca bir göz attım, ancak doğru şekilde anladıysam, dinamik segmentlere 404 rota eklemeye çalışıyorsunuz demektir. Birkaç gün önce aynı sorunu yaşadım, # 458 ve # 1103'ü buldum ve render işlevi içinde el yapımı bir kontrolle sonuçlandım:

if (!place) return <NotFound />;

umarım yardımcı olur!