React-router路由

1.页面跳转router，页面会重新渲染

2.Hash router，类似页面跳转，只是跳转到hash指定的状态，页面不会重新刷新渲染

3.H5 router，模拟路由的同时页面不跳转，既能操作hahs也能操作路径，不渲染不刷新(只处理后退，不处理前进)

 

安装：

yarn add react-router-dom

可以加版本号react-router-dom@4.2.2

示例：

App.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router,Switch,Route,Redirect,Link } from 'react-router-dom'

import 'font-awesome/css/font-awesome.min.css';
import './index.scss';


//页面
import Home from 'page/home/Home.jsx'

class App extends React.Component{
	render(){
		return(
			<Router>
				<Switch>
					<Route exact path="/" component={Home}/>
					<Redirect from="*" to="/"/>
				</Switch>
			</Router>
		)
	}
}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
);

Home.jsx

import React from 'react';

class Home extends React.Component{
	render(){
		return(
			<div>Home</div>
		)
	}
	
}

export default Home;