REACR_react中如何使用路由

• 注意：使用路由必须引入路由标签，并且使用 标签包裹

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文件中

inport 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'