1, the route installation
cnpm install react-router-dom -S
2, the routing manner
HashRouter: router vue hash values with hash
BrowserRouter: Router VUE hash value without History
Note:
1, routing configuration item must be arranged inside HashRouter, BrowserRouter
2, HashRouter, internal BrowserRouter can only have one child
3, the routing configuration items commonly used components
4, Route
effect: When the matching is successful path, render component corresponding
Properties:
path: component corresponding to the path
component: the component to be rendered (component rendering manner)
the render: components required for rendering (rendering mode component)
Exact: exact match path
5, the routing mode jump
. 1, Link
2, NavLink
属性：
activeStyle
activeClassName
6, routing nesting
7, the routing mode rendering
render: label forms assembly
1, not only can render component but also render the tag
2, the components may be determined by value, and a logic
3, render rendering component default is no history location match if these three properties need to be passed through the assembly
component: name monovalent group
1, only render component
2, for all the current components as props in there three more rendering attributes (history location match) by component
8, parameter passing route
1, dynamic routing
in the definition of the route when the defined pass key value of the parameter <Route path = "/ detail / : id /: name" component = {Detail} />
passing values need to pass at the time of route jumps <h2 key = {index}> <Link to = {item.path + "/" + item.goodsId + "/" + item.goodsName}> {item.goodsName} </ Link> </ h2>
When received by the receiving this.props.match.params
2, query traditional values
splice 1, the transmission path according to the embodiment of the values in the query node needs to parse module url
2, a traditional values according to the form of objects to = {{pathname: "Path", query: {value}}} need to pass
9、编程式导航
this.props.history.goBack()
this.props.history.goForward()
this.props.history.push()
this.props.history.replace()
10, withRouter
. 1, if the current component inside this.props no history location match when the assembly can be wrapped by withRouter
then export component such current component will have several attributes of the route
import {withRouter} from "react- DOM-Router "
........
Export default withRoute (component name)
11, Switch
wrapped Switch routing component only match when a match
12, Redirect
redirect
from: come
to: where to go