リアクタのマッチミス

Question

MatchおよびMissのコンポーネントをreact-routerからRouter以上のコンポーネントに使用する利点は何ですか？私はreact-router docsにこれに関するドキュメントを見つけることができないようです。

私の質問はここで見ることによって、より正確に、react-universally定型文を見てから起動します：https://github.com/ctrlplusb/react-universally

Answer 1

<Match>と<Miss>が反応ルータV4のアルファリリースにコンポーネントました。ベータ版で

、<Match>は<Route>名前が変更されました（とpatternが今pathあるとexactlyがexactであるように、その小道具が変更されました）。 <Miss>コンポーネントが完全に削除されました。代わりに<Switch>ステートメントを使用してください。一致する最初の<Route>（または<Redirect>）のみがレンダリングされます。パスのないコンポーネントを<Switch>のルートの最後の子として追加することができ、先行するいずれのものも一致しないときにレンダリングされます。<Route>

詳しくは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'));