React Router Match Miss

Question

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

Мой вопрос нерестится смотреть на react-universally шаблонный, точнее, посмотрев здесь: https://github.com/ctrlplusb/react-universally

Answer 1

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

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

Для получения более подробной информации вы можете найти API documentation.

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

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