Реагировать на Router Match Miss

В чем преимущество использования компонентов Match и Miss от react-router по компоненту Router? Я не могу найти документацию об этом в документах-ответах-адаптерах.

Мой вопрос возникает из рассмотрения react-universally шаблона, точнее, здесь: <а2 >

Ответ 1

<Match> и <Miss> были компонентами альфа-релиза React Router v4.

В бета-версии <Match> было переименовано <Route> (и его реквизиты изменены так, что pattern теперь path и exactly есть exact). Компонент <Miss> полностью удален. Вместо этого вы должны использовать оператор <Switch>, который будет отображать только первый <Route> (или <Redirect>), который соответствует. Вы можете добавить бесконтактный компонент в качестве последнего дочернего элемента маршрутов <Switch>, и он будет отображаться, если ни один из предыдущих <Route> не соответствует.

Подробнее об этом можно узнать в документации API.

<Switch>
  <Route exact path='/' component={Home} />
  <Route path='/about' component={About} />
  // The following <Route> has no path, so it will always
  // match. This means that <NoMatch> will render when none
  // of the other <Route>s match the current location.
  <Route component={NoMatch} />
</Switch>

Ответ 2

И чтобы добавить к последнему сообщению, вы найдете это в react-router-dom. Он больше не находится в основной библиотеке реактивного маршрутизатора.

Здесь шаблон, который я нашел, работает для реакции маршрутизации. Как и в предыдущих плакатах, в основном. Вам нужно будет создать дополнительные компоненты.

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

{/* Импортируйте свои компоненты здесь */}

 class Root extends React.Component{
        render(){
            return(
                <div>
                <Router>
                    <div> 
                        <Switch>
                            <Route exact path='/' component={App} /> )} />
                            <Route path="/some-component"  component={SomeComponent} /> 
                            <Route component={NotFound}/>
                        </Switch>
                    </div>
                </div>
            ); }
    }



    render(<Root/>, document.querySelector('#main'));