从github上下了一个项目,App.js里面的路由配置看的不是太明白,各位大神帮忙分析下
<Router>
<Switch>
<Route path='/' exact render={() => <Redirect to='/index' />} />
<Route path='/500' component={View500} />
<Route path='/login' component={Login} />
<Route path='/404' component={View404} />
<Route component={DefaultLayout} />
</Switch>
</Router>
首先项目中已经配置了 /index 路由为 Index.jsx 组件
DefaultLayout组件为左侧导航还有左侧的头部、内容和底部
有两个疑惑点:
- <Route path='/' exact render={() => <Redirect to='/index' />} />
这行代码里面的render里面的写法怎么理解 - <Route component={DefaultLayout} />
这行代码里面为什么没有path 应该怎么理解
我在这行代码下面写了下面的代码 A组件为一个demo组件 里面是一个<div>123</div>
<Route component={A} />
为什么这里的A组件就不会被渲染
1.其实就是一个匿名的函数组件,懒得定义一个组件,或者内容不多且不复用,就这么扔进去挺好,明了。
2.我感觉这个例子有点儿问题,主要是没这么用过。不提供path的route通常要提供子路由的。没有path的这一层提供一个多个子路由公用的组件,比如侧边菜单之类的。