1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
<Link to="/xxxxx">Demo</Link>
3.展示区写Route标签进行路径的匹配
<Route path='/xxxx' component={Demo}/>
4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>
1.写法不同：
一般组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/>
2.存放位置不同：
一般组件：components
路由组件：pages
3.接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性
history:
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)
location:
pathname: "/about"
search: ""
state: undefined
match:
params: {}
path: "/about"
url: "/about"
1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
1.通常情况下，path和component是一一对应的关系。
2.Switch可以提高路由匹配效率(单一匹配)。
1.public/index.html 中 引入样式时不写 ./ 写 / （常用）
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
3.使用HashRouter
1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2.开启严格匹配：<Route exact={true} path="/about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
2.具体编码：
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/about"/>
</Switch>
1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的
下面将通过一个实例一一分析上述用法。
bootstrap.css自己下载即可
.ico是图标，可有可无
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="/css/bootstrap.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.atguigu{
opacity:0.5;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>
这里使用
<link rel="stylesheet" href="/css/bootstrap.css">
而不是
<link rel="stylesheet" href="./css/bootstrap.css">
能够防止样式在多路由的丢失
atguigu的样式则是为了展现NavLink中的activeClassName属性准备的，点击会使得按钮的透明度发生变化。
//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//
import {BrowserRouter} from 'react-router-dom'
//引入App
import App from './App'
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
)
入口文件，直接包着BrowserRouter，方便配置路由。因为在同一个一个路由器中才能进行路由匹配
import React, { Component } from 'react'
import {Route,Switch,Redirect} from 'react-router-dom'
import Home from './pages/Home' //Home是路由组件
import About from './pages/About' //About是路由组件
import Header from './components/Header' //Header是一般组件
import MyNavLink from './components/MyNavLink'
import Show from './pages/Show'
export default class App extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<Header/>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 原生html中，靠<a>跳转不同的页面 */}
{/* <a className="list-group-item" href="./about.html">About</a>
<a className="list-group-item active" href="./home.html">Home</a> */}
{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>
<MyNavLink to="/show/hunter">Show</MyNavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/* 注册路由 */}
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Route path="/show" component={Show}/>
<Redirect to="/about"/>
</Switch>
</div>
</div>
</div>
</div>
</div>
)
}
}
App组件的内容。
点击About按钮，展示对应About组件
点击Home按钮，展示对应Home组件
点击Show按钮，展示对应Show组件，值得注意这里Show按钮to中的路由多了一截，因为是模糊匹配，因此当匹配到show时就可以认为匹配成功
<Redirect to="/about"/>
当按钮没有指定任何路由时，会自动重定向展示about组件
<Switch>
嵌套此标签则表示，匹配路由当匹配到之后便不再往下匹配，提高效率。
用于存放通用的组件
import React, { Component } from 'react'
export default class Header extends Component {
render() {
// console.log('Header组件收到的props是',this.props);
return (
<div className="page-header"><h2>React Router Demo</h2></div>
)
}
}
标题组件（一直存在）
import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'
export default class MyNavLink extends Component {
render() {
// console.log(this.props);
return (
<NavLink activeClassName="atguigu" className="list-group-item" {...this.props}/>
)
}
}
用于存放能够进行路由跳转的组件，{…this.props}则是将传来的参数全都展开，activeClassName属性用于当此组件被点击会被赋予特定样式，to是跳转的路由，此组件中的chilren属性就是组件中展现的文字。
用于存放设置好路由，点击按钮，才会展现的组件
import React, { Component } from 'react'
export default class About extends Component {
render() {
// console.log('About组件收到的props是',this.props);
return (
<h3>我是About的内容</h3>
)
}
}
用于展示点击about按钮后的组件。
import React, { Component } from 'react'
import MyNavLink from '../../components/MyNavLink'
import {Route,Switch,Redirect} from 'react-router-dom'
import News from './News'
import Message from './Message'
export default class Home extends Component {
render() {
return (
<div>
<h3>我是Home的内容</h3>
<div>
<ul className="nav nav-tabs">
<li>
<MyNavLink to="/home/news">News</MyNavLink>
</li>
<li>
<MyNavLink to="/home/message">Message</MyNavLink>
</li>
</ul>
{/* 注册路由 */}
<Switch>
<Route path="/home/news" component={News}/>
<Route path="/home/message" component={Message}/>
<Redirect to="/home/news"/>
</Switch>
</div>
</div>
)
}
}
Home组件。
Home组件中还有两个按钮分别是News和Message，点击按钮需要展示对应的子组件，这里可以配置多级路由，前提是子路由需要前一级和父路由匹配。
import React, { Component } from 'react'
export default class Message extends Component {
render() {
return (
<div>
<ul>
<li>
<a href="/message1">message001</a>
</li>
<li>
<a href="/message2">message002</a>
</li>
<li>
<a href="/message/3">message003</a>
</li>
</ul>
</div>
)
}
}
Home组件中需要展示的message组件。
可以发现其中的message按钮的路由并不存在，因此到时候会重定向到about中
import React, { Component } from 'react'
export default class News extends Component {
render() {
return (
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
)
}
}
Home组件中展示的News组件
需要安装react-router-dom
因为这是5的实例
因此
yarn add react-router-dom@5
然后运行
npm start
打开网页
点击Show
发现可以匹配，证明模糊路由
Show按钮变淡，说明NavLink那个属性设置成功
点击Home
Home组件中的组件内容也展示成功。
点击Message
说明多级路由配置成功。
点击Message001
跳转到About组件内容
说明路由无法匹配到发生重定向成功。