javascript - 为什么 <Route component={Menu}/> 而不是 <Menu/>？

Question

我的/About 中有一个包含路线的子菜单。
这个子菜单称为 AboutMenu 并出现在/About 下的所有页面，例如 =>/About/Company 和/About/Info。

练习示例显示 <Route component={AboutMenu} />与 activeStyle={match.isExact && selectedStyle}>我刚用过<AboutMenu />并添加了 exact改为我的 AboutMenu 链接。

为什么要使用 <Route component={AboutMenu} />而不是仅仅渲染 <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>
    )
}

关于部分

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>没有 path将永远匹配。所以，两者

<AboutMenu />

和

<Route component={AboutMenu} />

将导致 AboutMenu组件始终呈现。也就是说，在这种特殊情况下，您可以互换使用它们中的任何一个。

但是，在 <Switch> 的情况下， 两者之间存在差异组件被使用。看这个例子:

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

这里，

<Route component={NoMatch}/>

排在最后，如果之前没有匹配的路由，它只会匹配，就像default case一样。传统的switch许多编程语言中的语句。如果上面的两条路线之一匹配，它将不匹配，随后是 NoMatch组件不会被渲染。相反，如果最后一条路线只是

<NoMatch />

NoMatch组件将总是被渲染。