React全家桶+AntD共享单车-后台管理系统开发-笔记-03

第四章 Router 4.0 路由实战演练

主要介绍Router 4.0 路由的使用，从Demo讲解到实战演练，一应俱全。

4-1 React-Router 4.0路由基本介绍

React Router 4.0
第三章 React路由4.0

• 第一节：React Router 4.0 基本概念介绍
• 第二节：React Router 4.0 Demo介绍
• 第三节：项目路由实战开发

React Router 4.0 基本概念介绍
核心概念及用法介绍

• react-router
• react-router-dom
• react-router-dom核心用法

react-router和react-router-dom理解

• 4.0版本中已不需要路由配置，一切皆组件
• react-router：提供了一些router的核心api，包括Router,Route,Switch等
• react-router-dom：提供了BrowserRouter,HashRouter,Route,Link,NavLink

路由模块安装

• npm install react-router-dom --save
• yarn add react-router-dom

react-router-dom核心用法

• HashRouter和BrowserRouter
• Route：path、exact、component、render
• NavLink、Link
• Switch
• Redirect

HashRouter和BrowserRouter

• http://localhost:3000/#/admin/buttons
• http://localhost:3000/admin/buttons

Route用法
<Route path='/admin/ui/buttons' component={Buttons} />
<Route path='/admin/ui/modals' component={Modals} />
<Route path='/admin/ui/loading' component={Loading} />
<Route path='/admin/ui/notification' component={Notice} />
<Route path='/admin/ui/messages' component={Messages} />
<Route path='/admin/ui/tabs' component={Tabs} />
<Route path='/admin/ui/gallery' component={Gallery} />
<Route path='/admin/ui/carousel' component={Carousel} />

<Route path='/admin' render={()=>} />

Link
定义：<Route path="/three/:number" />取值：this.props.match.params.number

Switch
Redirect:路由重定向：<Redirect to="/admin/home/"/>

http://react-router.docschina.org/web/guides/philosophy
http://react-guide.github.io/react-router-cn/
http://caibaojian.com/react/

4-2 -React-Router4.0 路由Demo演示（1）

• 4.0 基本路由功能Demo实现-混合组件化：Link、HashRouter、Route
• 4.0 基本路由功能Demo实现-配置化 ：Link、HashRouter、Route

4.0 route只能有一个子节点，5.0没有这条限制

// src/index.js
import Home from './pages/route_demo/route1/Home'; // 新增
换成Home组件

// src/pages/route_demo/route1/Home.js
import React from 'react'
import {HashRouter, Route, Link,Switch} from 'react-router-dom'
import Main from './Main'
import About from './about'
import Topic from './topic'

export default class Home extends React.Compon