react-router-dom 项目路由初始化

从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组件为左侧导航还有左侧的头部、内容和底部

有两个疑惑点:

  1. <Route path='/' exact render={() => <Redirect to='/index' />} />
    这行代码里面的render里面的写法怎么理解
  2. <Route component={DefaultLayout} />
    这行代码里面为什么没有path 应该怎么理解
    我在这行代码下面写了下面的代码 A组件为一个demo组件 里面是一个<div>123</div>
    <Route component={A} />
    为什么这里的A组件就不会被渲染
阅读 2.3k
1 个回答

1.其实就是一个匿名的函数组件,懒得定义一个组件,或者内容不多且不复用,就这么扔进去挺好,明了。
2.我感觉这个例子有点儿问题,主要是没这么用过。不提供path的route通常要提供子路由的。没有path的这一层提供一个多个子路由公用的组件,比如侧边菜单之类的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题