React-Router: Нет Не Найден Маршрут?

в новых версиях react-router вы хотите оберните маршруты в коммутатор который отображает только первый согласованный компонент. В противном случае вы увидите несколько компонентов визуализации.

например:

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 path="*" component={NotFound}/>
    </Switch>
  </Router>
);

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

в новой версии React Router (теперь используется 2.0.1) вы можете использовать звездочку в качестве пути для маршрутизации всех "других путей".

Так это будет выглядеть так:

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

По словам документация, маршрут был найдено, хотя ресурса не было.

Примечание: это не предназначено для использования, когда ресурс не найден. Существует разница между маршрутизатором, который не находит согласованный путь, и допустимым URL-адресом, который приводит к тому, что ресурс не найден. Url courses / 123 является допустимым url и приводит к согласованному маршруту, поэтому он был "найден" в отношении маршрутизации. Затем, если мы получим некоторые данные и обнаружим, что курс 123 не существует, мы не хотим переходить на новый маршрут. Как и на сервере, вы идете вперед и обслуживаете url, но отображаете другой пользовательский интерфейс (и используете другой код состояния). Вы никогда не должны пытаться перейти на NotFoundRoute.

таким образом, вы всегда можете добавить строку в Router.run() до React.render() чтобы проверить, является ли ресурс допустимым. Просто передайте опору вниз к компоненту или переопределите Handler компонент с пользовательский чтобы показать процесс.

Я просто быстро взглянул на ваш пример, но если я понял его правильно, вы пытаетесь добавить 404 маршрута к динамическим сегментам. У меня была такая же проблема пару дней назад, нашел #458 и #1103 и в конечном итоге с ручной проверкой в функции рендеринга:

if (!place) return <NotFound />;

надеюсь, что помогает!

этот ответ для react-router-4. Вы можете обернуть все маршруты в Switch block, который функционирует так же, как выражение switch-case, и отображает компонент с первым согласованным маршрутом. например)

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

при использовании exact

без точной:

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

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

С точностью:

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

теперь, если вы принимаете параметры маршрутизации, и если это окажется неверным, вы можете обработать его в самом целевом компоненте. например)

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

теперь в ProfilePage.js

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

для более подробной информации вы можете пройти через этот код:

приложение.js

ProfilePage.js