- 注意:使用路由必须引入路由标签,并且使用 标签包裹
1.安装路由
- npm install react-router-dom --save
2.新建文件
/src/routes.js
import React,{Component} from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom'
//导入组件
import Home from './home/index'
import Login from './login/index'
//exact 精确匹配
class Routes extends Component {
render(){
return (
<Router>
<div>
<Route path='/login' component={Login} ></Route>
<Route exact path='/index' component={Home} ></Route>
</div>
</Router>
)
}
}
export default Routes;
3.引入
/src/index.js文件中
import Routes from './routes' //引入路由文件
ReactDOM.render(
<React.StrictMode>
<Routes /> //修改成路由组件
</React.StrictMode>,
document.getElementById('root')
);
4.使用
- js中跳转
有些场景下,重复使用push或a标签跳转会产生死循环,所以官方提供有replace
this.props.history.push('/index')
this.props.history.replace('/login')
获取方式
this.props.match
导入方式:
routes.js
inport {
BrowserRouter as Router,
Route, //这是基本的路由快
Link, //这是a标签
Switch //这是监听空路由的
Redirect //这是重定向
Prompt //防止转换
} from 'react-router-dom'