react-router-dom提供了一对选项用于管理单页面应用中的导航历史记录。
1、路由的配置
1）安装react-router-dom
npm install react-router-dom --save
yarn add react-router-dom -S
2)src下创建pages目录，并创建多个不同页面
示例
import React from 'react' //引入react
export default function Home() {
return <div > this is Home < /div>
}
2)src下创建router.js，配置路由
import React from 'react' //引入react
import {BrowserRouter as Router ,Route,Switch} from 'react-router-dom' //引入集成router
import App from './pages/app'
import Login from './pages/login'
import Home from './pages/home'
export default function IRouter(){
return <Router>
<Switch>
<Route exact path="/" component={App}></Route>
<Route path="/login" component={Login}></Route>
<Route path="/home" component={Home}></Route>
</Switch>
</Router>
}
3)修改src下的index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router'; //导入router
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Router /> //挂载路由
</React.StrictMode>,
document.getElementById('root')
);
2、路由BrowserRouter、HashHistory路由模式
1、BrowserRouter：Url不带有哈希字符(#)，大部分准备上线的网站应用，推荐的此History方案
2、HashHistory：Url带上的哈希字符(#)，用于定义锚点链接
3、Router属性
1、exact：路径和根目录/精确匹配
没有使用Switch示例
没有使用Switch
2、Switch：匹配一个后停止匹配
没有使用exact示例
没有使用exact
3、component:表示路径对应显示的组件
4、path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）
