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

Question

我的/ About中有一个带有Routes的子菜单.
此子菜单名为AboutMenu,出现在/ About like =>/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>与 nopath总是匹配。所以，两者

<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组件将始终被渲染。