简介
react-router由React Training(官网)和许多令人惊叹的贡献者（github）开发和维护。
参考文档
安装环境
- 创建如果您需要创建一个，最简单的入门方法是使用名为Create React App的流行工具。
- Web应用程序中使用的所有组件react-router-dom
npm install --save-dev react-router-dom
基础属性
1.路由器
对于Web项目，react-router-dom提供
<BrowserRouter>和<HashRouter>路由器。一般来说，<BrowserRouter>响应请求的服务器路由，<HashRouter>静态文件服务器路由。
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
DOM
);
2.路由匹配
有两个路由匹配组件：
<Route>和<Switch>。<Switch>将迭代其所有子<Route>元素，并仅渲染与当前位置匹配的第一个子元素。
import React, { Component } from 'react';
import Hello from './Content/Hello'
import State from './Content/State'
import Event from './Content/Event'
import NoMatch from './Content/NoMatch'
import { Route, Switch } from "react-router-dom";
class Content extends Component {
constructor() {
super()
}
render() {
return <Switch>
<Route exact path="/" component={Hello} />
<Route path="/State" component={State} />
<Route path="/Event" component={Event} />
<Route component={NoMatch} />
<Event />
</Switch>
}
}
export default Content;
2.<router>渲染组件属性
<router>有三个属性选择渲染组件，分别是component、render、children
const Home = () => <div>Home</div>;
const App = () => {
const someVariable = true;
return (
<Switch>
{/* these are good */}
<Route exact path="/" component={Home} />
<Route
path="/about"
render={props => <About {...props} extra={someVariable} />}
/>
{/* do not do this */}
<Route
path="/contact"
component={props => <Contact {...props} extra={someVariable} />}
/>
</Switch>
);
};
3.导航
React Router提供了一个
<Link>组件来在您的应用程序中创建链接。<NavLink>是一种特殊类型。任何时候你想强制导航，你可以渲染一个<Redirect>。
<Link to="/">Home</Link>
//<a href='/'>Home</a>
<NavLink to="/react" activeClassName="hurray">
React
</NavLink>
// <a href='/react' className='hurray'>React</a>
<Redirect to="/login" />
API
<withRouter>
访问
history对象的属性和最近<Route>的match经withRouter高阶组件。
tip:它就是个高阶组件，组要在props上加载history对象。
import React, { Component } from 'react';
import {withRouter} from 'react-router-dom'
class Footer extends Component {
constructor() {
super()
this.goBack = this.goBack.bind(this)
}
goBack(){
console.log("goback",this.props)
this.props.history.go(-1)
}
render() {
return (
<div>
<button onClick={this.goBack}>返回</button>
{this.props.children}
</div>
)
}
}
export default withRouter(Footer)
