React-Router: Nie znaleziono trasy?

Rozważ następujące:

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

Mam szablon aplikacji, szablon HeaderTemplate i sparametryzowany zestaw tras z tym samym programem obsługi (w szablonie aplikacji). Chcę mieć możliwość obsługi tras 404, gdy czegoś nie znaleziono. Na przykład / CA / SanFrancisco powinno być znalezione i obsługiwane przez Area, a / SanFranciscoz - 404.

Oto jak szybko testuję trasy.

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

Problem polega na tym, że / SanFranciscoz jest zawsze obsługiwany przez stronę Area, ale chcę, aby 404. Ponadto, jeśli dodam NotFoundRoute do pierwszej konfiguracji trasy, wszystkie strony obszaru 404.

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

Co ja robię źle?

Oto sedno, które można pobrać i poeksperymentować.

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

DefaultRoute i NotFoundRoute zostały usunięte wreak-router 1.0.0.

Chciałbym podkreślić, że domyślna trasa oznaczona gwiazdką musi być ostatnia na obecnym poziomie hierarchii, aby działała. W przeciwnym razie nadpisuje wszystkie inne trasy, które pojawiają się po niej w drzewie, ponieważ jest pierwsza i pasuje do każdej ścieżki.

Dla routerów React-Router 1, 2 i 3

Jeśli chcesz wyświetlić 404 i zachować ścieżkę ( taka sama funkcjonalność jak NotFoundRoute)

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

Jeśli chcesz wyświetlić stronę 404, ale zmienić adres URL ( taka sama funkcjonalność jak DefaultRoute)

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

Przykład z wieloma poziomami:

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

Do routerów React-Router 4 i 5

Trzymaj się ścieżki

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

Przekieruj na inną trasę (zmień adres URL)

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

Porządek ma znaczenie!

W nowszych wersjach react-router chcesz zawijać trasy w Switch, który renderuje tylko pierwszy dopasowany komponent. W przeciwnym razie wyrenderowanych byłoby wiele komponentów.

Na przykład:

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

W nowej wersji React Router (używającej teraz wersji 2.0.1) możesz użyć gwiazdki jako ścieżki do trasowania wszystkich „innych ścieżek”.

Więc wyglądałoby to tak:

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

Ta odpowiedź dotyczy react-router-4. Możesz zawijać wszystkie trasy w bloku Switch, który działa tak samo jak wyrażenie przełącznika wielkości liter i renderuje składnik z pierwszą dopasowaną trasą. na przykład)

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

Kiedy użyć exact

Bez dokładnego:

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

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

Z dokładnym:

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

Teraz, jeśli akceptujesz parametry routingu i jeśli okaże się to nieprawidłowe, możesz sobie z tym poradzić w samym komponencie docelowym. na przykład)

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

Teraz w ProfilePage.js

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

Aby uzyskać więcej informacji, możesz przejść przez ten kod:

App.js

ProfilePage.js

Zgodnie z dokumentacją trasa została znaleziona, chociaż zasobu nie było.

Uwaga : to nie jest przeznaczone do użycia, gdy nie zostanie znaleziony zasób. Istnieje różnica między routerem, który nie może znaleźć pasującej ścieżki, a prawidłowym adresem URL, który powoduje, że nie można znaleźć zasobu. Adres URL kursów / 123 jest prawidłowym adresem URL i skutkuje dopasowaną trasą, dlatego został „znaleziony”, jeśli chodzi o routing. Następnie, jeśli pobieramy jakieś dane i odkryjemy, że kurs 123 nie istnieje, nie chcemy przechodzić na nową trasę. Podobnie jak na serwerze, podajesz adres URL, ale renderujesz inny interfejs użytkownika (i używasz innego kodu stanu). Nigdy nie powinieneś próbować przejść do NotFoundRoute.

Więc zawsze możesz dodać linię w Router.run()przed, React.render()aby sprawdzić, czy zasób jest prawidłowy. Po prostu prześlij rekwizyt do komponentu lub nadpisz Handlerkomponent niestandardowym, aby wyświetlić widok NotFound.

Właśnie rzuciłem okiem na twój przykład, ale jeśli dobrze go zrozumiałem, próbujesz dodać trasy 404 do dynamicznych segmentów. Kilka dni temu miałem ten sam problem, znalazłem # 458 i # 1103 i skończyło się na ręcznym sprawdzeniu w funkcji renderowania:

if (!place) return <NotFound />;

mam nadzieję, że to pomoże!