Neden <Route component = {Menu} /><Menu /> yerine?

Question

Benim/Hakkında'mda Routes ile bir alt menüm var.
Bu alt menü AboutMenu olarak adlandırılır ve/About like =>/About/Company ve/About/Info altındaki tüm sayfalarda bulunur.

bir egzersiz örneği activeStyle={match.isExact && selectedStyle}> ile <Route component={AboutMenu} /> gösterir ve ben sadece <AboutMenu /> kullanılmış ve yerine benim AboutMenu Bağlantılar exact eklendi.

Neden <AboutMenu /> oluşturmak yerine <Route component={AboutMenu} /> kullanıyorsunuz? Her zaman maç olacak hiçbir path ile bölüm

const About = (props) => { 

    return(
     <Template> 
      <AboutMenu /> 
      {/* OR <Route component={AboutMenu} /> ?*/} 
      <Route exact path='/About' component={Company} /> 
      <Route path='/About/History' component={History} /> 
      <Route path='/About/Vision' component={Vision} /> 
     </Template> 
    ) 
} 

export default About 

Answer 1

<Route> hakkında

export const AboutMenu = (props) => { 

    return (
     <div> 
      <li> 
       <NavLink exact to='/About' activeStyle={ activeStyle}> Company </NavLink> 
      </li> 
      <li> 
       <NavLink to='/About/History' activeStyle={activeStyle}> History </NavLink> 
      </li> 
      <li> 
       <NavLink to='/About/Vision' activeStyle={activeStyle}> Vision </NavLink> 
      </li> 
     </div> 
    ) 
} 

. Dolayısıyla, hem

<AboutMenu /> 

ve

<Route component={AboutMenu} /> 

hep render AboutMenu bileşeni ile sonuçlanacaktır. Yani, bu durumda, bunlardan herhangi birini kendi aralarında kullanabilirsiniz. Bununla birlikte, , <Switch> bileşeninin kullanıldığı durumlarda, ikisi arasında bir fark olduğu için vardır. Bu örnekte bak:

<Route component={NoMatch}/> 

son gelir ve, İşte

<Switch> 
    <Route path="/" exact component={Home}/> 
    <Route path="/will-match" component={WillMatch}/> 
    <Route component={NoMatch}/> 
    </Switch> 

o olacak sadece maçı ise birçok programlama geleneksel switch ifadenin default case gibi hareket ondan önce eşleşti hiçbir yol, duujjil. Yukarıdaki iki yoldan biri eşleşirse eşleşmez ve daha sonra NoMatch bileşeni oluşturulmaz. yerine geçen rota, sadece

<NoMatch /> 

NoMatch bileşeni daima hale getirilecektir yoktu.