Question

我的/ About中有一个带有Routes的子菜单此子菜单名为AboutMenu，出现在/ About下的所有页面上= = /关于/公司和/关于/信息。

一个练习示例显示<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组件将始终呈现。

为什么<route component =“{Menu} /”>而不是<menu>？

1 个答案: