React Router Match Miss

Question

Router bileşeninden react-router bileşenlerinden Match ve Miss bileşenlerini kullanmanın avantajı nedir? Bu konuda react-router docs numaralı belgeyi bulamıyorum.

Sorum burada bakarak, daha doğrusu react-universally boilerplate bakarak yumurtlar: https://github.com/ctrlplusb/react-universally

Answer 1

<Match> ve <Miss> Yönlendirici v4 Tepki alfa sürümünde bileşenleri idi. beta olarak

, <Match> <Route> yeniden adlandırıldı (ve pattern şimdi path ve exactly exact böylece onun sahne değişti). <Miss> bileşeni tamamen kaldırıldı. Bunun yerine, eşleşen ilk <Route> (veya <Redirect>) işlemini oluşturacak <Switch> ifadesini kullanmalısınız. <Switch> yollarının son çocuğu olarak yolsuz bir bileşen ekleyebilir ve önceki <Route> eşleşmelerinin hiçbiri eşleşmediğinde görüntülenir.

Daha fazla ayrıntı için API documentation'a göz atabilirsiniz.

<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

Son gönderiye eklemek için, bunu react-router-dom içinde bulabilirsiniz. Artık tepki-yönlendirici çekirdek kütüphanesinde değil.

İşte size bir yol bulmak için tepki yönlendirme çalışmaları bulduk. Temelde önceki posterlerle aynı. Dahil olan ek bileşenleri oluşturmanız gerekir.

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

{/ * burada bileşenlerini içe * /} cevabını çok

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