高阶组件
const PrivateRoute = ()=>{
return <Route path='/'><Home/></Route>
}
使用
<Swith>
<Route path='/'><Home/></Route>//第一种方式
<PrivateRoute />//第二种方式
</Swith>
这两种方式在使用上有什么区别,主要是想在 PrivateRoute 写一些逻辑。
但是好像不行,匹配不上
其他路由的都可以 就是 '/' 不行 ,实在脑壳疼
高阶组件
const PrivateRoute = ()=>{
return <Route path='/'><Home/></Route>
}
使用
<Swith>
<Route path='/'><Home/></Route>//第一种方式
<PrivateRoute />//第二种方式
</Swith>
这两种方式在使用上有什么区别,主要是想在 PrivateRoute 写一些逻辑。
但是好像不行,匹配不上
其他路由的都可以 就是 '/' 不行 ,实在脑壳疼
问题已经解决,第二种方法是可行的。
问题出现在 exact 这个参数上。子路由设置为false 父路由设置为true
const routes = [
{ path: '/', component: <component/>, exact: true },
{ path: '/a', component: <component/>, exact: true },
{ path: '/b', component: <component/>, exact: true },
]
<Switch>
{
routes.map((item: any, idx: number) =>
<PrivateRoute
exact={item.exact}
path={item.path}
content={item.component}
key={idx} )
}
</Switch>
4 回答1.7k 阅读
2 回答1.1k 阅读✓ 已解决
2 回答2.6k 阅读
1 回答1k 阅读✓ 已解决
1 回答711 阅读✓ 已解决
2 回答875 阅读✓ 已解决
4 回答1.2k 阅读
理论上Switch组件和Route组件必须是直接上下级关系,否则可能会读取不到路由。所以第二种方法显然是不对的。至于你说的“/”不行我不太理解是怎么个不行法,是有报错还是不能匹配到正确的路由组件