gpt4 book ai didi

javascript - 为什么 而不是

转载 作者:数据小太阳 更新时间:2023-10-29 05:28:38 29 4
gpt4 key购买 nike

我的/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

最佳答案

<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组件将总是被渲染。

关于javascript - 为什么 <Route component={Menu}/> 而不是 <Menu/>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44468699/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com