react基础学习之路由篇（react-router-dom） 【react基础学习之路由篇（react-router-dom）】react路由会的人自然简单，不会的人总是一时半会绕不过来（也许是我太笨 ）
经过学习之后，总算可以写点入门的路由及封装
react-router-dom官方文档 建议把官方文档的例子好好研究一下，这个对帮助还是很大的
// 这是一个导航组件 menu.js
***//其他的引入
import { BrowserRouter as Router, Link } from 'react-router-dom';
//引入包
import router from '../../router/index';
// 引入封装好的路由配置文件
class Menu extends React.Component{
render(){
return (
// 最外层需要一个大的router包裹
import Home from '../views/Home/Home';
// 首页
import Message from '../views/Message/Message';
// 留言板
import Personal from '../views/Personal/Personal';
// 履历
import Contact from '../views/Contact/Contact';
// 联系我
import MarkDown from '../views/MarkDown/MarkDown';
// 发布文章import HomeRouters from './Home/HomeRouter'const router = [
{
path: '/home',
meta: {
title: '首页'
},
component: Home,
routes: HomeRouters// 子路由，下面会说到路由嵌套
},
{
path: '/message/',
meta: {
title: '留言板'
},
component: Message
},
{
path: '/personal/',
meta: {
title: '履历'
},
component: Personal
},
{
path: '/contact/',
meta: {
title: '联系我'
},
component: Contact
},
{
path: '/MarkDown/',
meta: {
title: '编辑文章'
},
component: MarkDown
}
]export default router
路由嵌套
当时因为脑子没转过弯来，在这纠结了好久
路由嵌套的时候，父组件不可以使用exact(严格模式)，子组件需要使用严格模式
会出现什么后果，请自行测试
访问的时候直接访问一级路由
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-