react-router-dom学习
三大核心:
- Router 所有组件共用的最外层
- Route 路由规则匹配,并显示当前规则匹配到的组件
- Link 路由的跳转组件,会渲染为a标签【通过this.props.history.push(path)来改变HashRouter中的pathname属性,进而驱动Route们进行重新渲染,匹配路由实现路由切换】
其他:
- HashRouter url为hash的路由,原理是window.location.hash
- BrowserRouter 浏览器的路由组件
- MeroryRouter 内存路由组件
- NativeRouter native的路由组件
- StaticRouter 地址不变的路由组件
具体操作:
- 下载
使用npm
npm install react-router-dom //或者 cnpm install react-router-dom
使用yarn
yarn add react-router-dom //或者 tyarn add react-router-dom
- 使用
router.js 【exact为精准匹配】
import React from 'react'
import {HashRouter, Route, Switch} from 'react-router-dom'
import Login from '../pages/login';//登陆页面
import Home from '../pages/home';//首页
const BaseRoute = () => {
return (
<HashRouter>
<Switch>
<Route path="/" exact key="home" component={Home}/>
<Route path="/home" exact key="home" component={Home}/>
<Route path="/login" exact key="login" component={Login}/>
</Switch>
</HashRouter>
)
};
export default BaseRoute;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import BaseRoute from './router'
ReactDOM.render(
<React.StrictMode>
<BaseRoute/>
</React.StrictMode>,
document.getElementById('root')
);
home.js
import React,{Component} from 'react'
class Home extends Component{
optionTo(){
this.props.history.push('/login')
}
render(){
return (
<div>
我是首页
<p onClick={this.optionTo.bind(this)}>点我去登陆</p>
</div>
)
}
}
export default Home;
login.js
import React,{Component} from 'react'
class Login extends Component{
render(){
return (
<div>
我是登陆页
</div>
)
}
}
export default Login;