也许Vue
在这一块显得更加方便快捷吧。
在React项目的src目录下进件一个router
文件夹,结构如下:
RouterList.js
模仿vue的router配置表,把组件的逻辑关系在表中配置好:
1 | // 一级 |
index.js
把
RouterList.js
的配置信息,利用Props
向RouterView.js
中传递。
作为RouterView.js
的容器,向外导出。便于在根组件中引入。
1 | import React, { Component } from 'react' |
RouterView.js
这里就是核心了,把index.js
传过来的路由表的配置,用代码的方式把路由组件解释为要展示的视图。
1 | import React, { Component } from 'react' |
三者的关系如下图:
其中的Router
就是我们用来引用的<router-view>
,如在App
中引入:
1 | import RouterView from './router' |
(¦3[▓▓]
- 本文链接: https://anyway521.gitee.io/post/a0e521a7.html
- 最后更新:
- 版权声明: 博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议进行许可,转载请注明出处!