1.1 Basic Usage
Features single page was: one only need to load the main page, by partial refresh, you can achieve a jump or switch page
Advantages: faster loading speed, user experience is better
Disadvantages:
- The first time you load a little slower than the traditional
- unfavorable SEO
- Page relatively complex
- the return key
1.2 Installation react-router-dom
cnpm install react-router-dom
Download to rely on the production environment.
In the assembly to acquire the `react-router-dom` way of built-in module by deconstructing the object, in the assembly, the internal components introduced on demand, be used in the page:
- HashRouter represents a root container routes, the future of all things related to routing, to be wrapped in HashRouter inside, and a Web site, only need to use once HashRouter just fine;
- Route represents a routing rule on the Route, there are two of the more important attributes, path, the Component
- link represents a linking route
The sample code
render(){
return (
<HashRouter>
<div>
<h1>这是网站的根目录</h1>
<hr />
<Link to="/home">首页</Link>
<Link to="/movie/">电影</Link>
<Link to="/about">关于</Link>
<hr />
<Route path="/home" component={Home} ></Route><hr/>
<Route path="/movie" component={Movie} exact></Route><hr/>
<Route path="/about" component={About}></Route><hr/>
</div>
</HashRouter>
);
}
When using HashRouter wrapped up the root component elements of APP, the site has enabled routing, and in a HashRouter, you can only have only one root element. In a Web site, only you need to use only one `<HashRouter> </ HashRouter>` on the line.
Route label creation, that is, routing rules, which represents the path to be matched routing, component represents the component to show. Route has two identities: 1 It is a route matching rule; 2 it is a placeholder to indicate future assembly to be put into this matching position.
Needs attention
- Route address is the path component / beginning, configure component properties, is a component of the display, this property may not be capitalized
- Route components can be single or double label use / end single-label needs, double tag can not be written in the middle of something else
- address Link to the property is / beginning, Link in page rendering is a label
2.1, routing traditional values
When configure routing address, the jump in Link
Route path behind the path / -: ID (Key)
- back to the path Link / top / 10 (value)
Pass receiving value:
- class class components, this.props.match.params property name.
- function components: attribute name parameter .match.params
The sample code
render(){
return (
<HashRouter>
<div>
<h1>这是网站的根目录</h1>
<hr />
<Link to="/movie/top/10">电影</Link>
<hr />
<Route path="/movie/:type/:id" component={Movie} exact></Route>
</div>
</HashRouter>
);
}
In Route built-in components, the address path configuration:
<Route path="/movie/:type/:id" component={Movie} exact></Route>
Link built-in module, configured to attribute, a jump:
<Link to="/movie/top/10">电影</Link>
Class component is received over the life cycle, this.props carrying data transmitted over the route:
render(){
console.log(this);
return (
<div>
电影--{this.props.match.params.type}--{this.props.match.params.id}
</div>
);
}
After the code optimization:
class Movie extends React.Component{
constructor(props){
super();
this.state = {
routeParams:props.match.params
}
}
render(){
console.log(this);
return (
<div>
电影--{this.state.routeParams.type}--{this.state.routeParams.id}
</div>
);
}
}
Function by forming component received parameter values transmitted over, props parameter, as a function of routing component assembly, props is passed over the object, which carries the routing data passed to it
import React from 'react'
export default function home(props) {
return (
<div>
{props.match.params.id}
</div>
)
}
2.2 nested routing
Nested route: In the routing components, a Link, Route, configure the sub-route, to achieve the jump, switching;
The following is a route, the route in a routing component Home
<Route path="/home" component={ Home }></Route>
Continue to use the Link, Route Home nested in the routing component, the routing address is to be noted, a front portion of a routing address, followed by the corresponding one of the two routing path
render() {
return (
<div>
<ul>
<li><Link to="/home/a">推荐</Link></li>
<li><Link to="/home/b">新时代</Link></li>
<li><Link to="/home/c">动漫</Link></li>
</ul>
<Route path="/home/a" component={ A }></Route>
<Route path="/home/b" component={ B }></Route>
<Route path="/home/c" component={ C }></Route>
</div>
)
}
2.3, JS achieve routing Jump
Introduced BrowserRouter module
import {BrowserRouter,HashRouter,Route,Link} from 'react-router-dom'
Use as a root container BrowserRouter
jump(){
window.location.href = "/news"
}
render(){
return (
<BrowserRouter>
<div>
<h1>这是网站的根目录</h1>
<hr />
<button onClick={()=>{this.jump()}}>新闻</button>
<hr />
<Route path="/news" component={News}></Route>
</div>
</BrowserRouter>
);
}
In the render method, write a button, the button is named js Jump routing, define an onClick method, the arrow points to the function to solve this problem, and render the same level, the definition of a jump method, the implementation of a code jump method for routing Jump using window.location.href = "routable address" for routing jump.
3, react-router-dom internal components
First introduced on demand, what built-in components, it is necessary to introduce
import { BrowserRouter, Link, Route,Redirect,NavLink,Switch } from 'react-router-dom'
3.1, used in the assembly NavLink
NavLink with a check activeClassName, if a route is active, the display is activated class style.
On the basis of the case before us, to find the Link component, we have learned the role of Link components can be routed jump through to property, jump corresponding path address.
```html//
<ul>
<li>
<Link to="/home">首页</Link>
</li>
<li>
<Link to="/video">好看视频</Link>
</li>
</ul>
Link the components replaced all the components NavLink
``html// <li> <NavLink activeClassName="red" to="/home">首页</NavLink> </li> <li> <NavLink activeClassName="red" to="/video">好看视频</NavLink> </li> ```
We will find that before you can be properly routed jump into NavLink, also still can jump normally use proven components have to jump NavLink can also be achieved, then the question is, what's the use NavLink, why encapsulates NavLink, the each NavLink added a binding property of a class's activeClassName style NavLink case when triggered, will trigger the corresponding the pattern, so that there is a switching effect.
3.2, using the built-in components in component Redirect
Redirect provided to redirect attribute, you can jump directly to the specified route.
In render method, a built-in component, the Redirect property to use built-in components, when the tags are built to perform, will be routed to jump, followed by the address to what is obtained can be matched to the respective routing components.
```html// <Redirect to="/home/c"></Redirect>
3.3, using the built-in component assembly Switch
Switch exclusive
Switch assembly used in the package label all available Route, this time, corresponds to each path is Route precise match, showing the respective components, the last Route is a path does not have the routing address, if a point does not exist when Link when the address, there is no precise match to the address, it will display the route to the C404, the Switch will only show a component to match up.
``html//
<Switch>
<Route path="/home" component={ Home }></Route>
<Route path="/video" component={ Home1 }></Route>
<Route path="/book" component={ Home2 }></Route>
<Route path="/renwu" component={ Home3 }></Route>
<Route path="/user" component={ Home4 }></Route>
<Route component={ C404 }></Route>
</Switch>
```