持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
根据不同的路径，显示不同dom的组件或内容；React使用的库 react-router-dom
ReactRouter三大组件：
1、按需导入react-router-dom里面的三个组件
BrowserRouter as Router 为前面的组件取一个别名，主要的原因是因为react-router-dom提供了两个路由容器；一个是BrowserRouBter 另一个是HashRouter；所有的路由操作都必须定义在着两个组件任意一个下面
2、Rout需要该组件定义好路径和显示组件的对应关系
3、Link就是一个a链接，实现声明式的跳转。
注意：如果要精确匹配，那么可以在route上设置exact属性。
案例：
import React from 'react';
import Home from './components/Home';
import News from './components/News';
import Profile from './components/Profile';
import './css/index.css';
//1、按需导入react-router-dom里面的三个组件
//BrowserRouter as Router 为前面的组件取一个别名，主要的原因是因为react-router-dom提供了两个路由容器；一个是BrowserRouBter 另一个是HashRouter；所有的路由操作都必须定义在着两个组件任意一个下面
//2、Rout需要该组件定义好路径和显示组件的对应关系
//3、Link就是一个a链接，实现声明式的跳转。
import{BrowserRouter as Router,Route,Link,NavLink}from "react-router-dom"
class App extends React.Component{
render(){
return(
<Router>
<div>
<h1>react路由h1>
{/**声明式路由 */}
<NavLink activeClassName="selected" to="/Home">首页NavLink><br/>
<NavLink activeClassName="selected" to="/News">新闻列表NavLink><br/>
<NavLink activeClassName="selected" to="/Profile">个人中心NavLink>
<hr/>
<Route path="/Home" component={Home}>首页Route>
<Route path="/News" component={News}>新闻列表Route>
<Route path="/Profile" component={Profile}>个人中心Route>
div>
Router>
)
}
export default App;
children组件特性
1、无论我们的URL在地址里面hash是否和hash进行怎么样的匹配，对应的children里面的组件都会被渲染出来
2、children函数式组件可以接收一个参数props ，如果path和URL地址的hash匹配上了，则props里面的match属性就是一个对象，对象里面包含了地址相关的信息，如果匹配不上，值为null，但是组件还是会渲染出来
案例：
<Route path="/about" children={(props)=>{
return(
<div><h2>children组件h2>div>
)
}}>Route>
Render组件特性：
Render属性值式一个函数式组件，当URL地址和path匹配的时候，就会加载该函数式组件
注意：当我们在使用react-router进行单页开发的时候，无论式函数式组件，还是类组件，props里面都会包含当前的URL地址信息
1、history 主要式做函数式导航
2、location代表的URL地址信息
3、match 路由传参
案例：
<Route path="/Renders" render={(props)=>{
return(
<div>
<h1>render组件h1>
div>
)
}} >Route>
