react-router-dom学习及案例

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 地址不变的路由组件

具体操作：

1. 下载

使用npm
npm install react-router-dom //或者 cnpm install react-router-dom
使用yarn
yarn add react-router-dom //或者 tyarn add react-router-dom

2. 使用

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;