Tại sao <Route component = {Menu} /> thay vì <Menu />?

Question

Tôi có một menu con với các Tuyến đường trong/Giới thiệu của tôi.
Menu phụ này được gọi là AboutMenu và có mặt tại tất cả các trang trong/About like =>/About/Company và/About/Info.

Một ví dụ cho thấy tập thể dục <Route component={AboutMenu} /> với activeStyle={match.isExact && selectedStyle}> và tôi chỉ sử dụng <AboutMenu /> và thêm exact để Liên kết AboutMenu của tôi để thay thế.

Tại sao bạn sử dụng <Route component={AboutMenu} /> thay vì chỉ hiển thị <AboutMenu />?

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

về phần

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> không có path sẽ luôn luôn phù hợp. Vì vậy, cả hai

<AboutMenu /> 

và

<Route component={AboutMenu} /> 

sẽ dẫn đến việc thành phần AboutMenu luôn trả lại. Đó là, trong trường hợp cụ thể này, bạn có thể sử dụng một trong hai thay thế cho nhau.

Tuy nhiên, có là sự khác biệt giữa hai trường hợp khi sử dụng thành phần <Switch>. Nhìn vào ví dụ này:

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

Ở đây,

<Route component={NoMatch}/> 

đến cuối cùng, và nó sẽ chỉ trận đấu nếu không phù hợp trước khi nó tuyến đường, hành động như default case của switch tuyên bố truyền thống trong nhiều chương trình ngôn ngữ. Nó sẽ không khớp nếu một trong hai tuyến phía trên khớp với nhau và sau đó thành phần NoMatch sẽ không được hiển thị. Nếu thay vào đó là con đường cuối cùng đã có chỉ

<NoMatch /> 

thành phần NoMatch sẽ luôn được trả lại.