title: React Router V4 Study Notes
date: 2018-02-02 11:27:57
banner: http://img.yanyuanfe.cn/stock-photo-245282361.jpg
tags:
- React Router
- React
React Router is now an essential skill for developing single-page applications with React. Since the upgrade to version 4, many core APIs have been rewritten, adhering to the concept that routes are components. This article is a summary of my learning experience with React Router V4.
Introduction#
React-Router V4 is a major update to react-router, with many core APIs changed. With react-router 4, centralized configuration of routes is not required, as everything is treated as a component.
React-router 4 is split into three packages: react-router, react-router-dom, and react-router-native. React-router provides the core routing functionality of React Router, including Router, Route, Switch, etc., but we won't be using it directly. react-router-dom and react-router-native provide routing components for specific runtime environments. If you need to develop a web application that runs in the browser, you should install react-router-dom. Similarly, if you need to develop a React Native application, you should install react-router-native. Both of these packages will install react-router as a dependency.
react-router-dom#
react-router uses react-router-dom as the browser-side routing package, providing APIs such as BrowserRouter, Route, Link, etc., to control routing through DOM events. In web development, we mostly use react-router-dom. The discussion in this article is limited to react-router-dom.
Installation
npm install react-router-dom --save
Usage#
Router#
To use react-router4, you first need to choose a Router, which wraps the entire application. There are two types of Routers: HashRouter and BrowserRouter, which behave differently and need to be distinguished when used.
HashRouter vs BrowserRouter#
The most obvious difference between HashRouter and BrowserRouter is that HashRouter's URL contains a #, for example, localhost:3000/#. HashRouter controls routing based on the hash value. If you use HashRouter, your routes will have this # by default.
BrowserRouter's URL does not contain a #, and its URL looks like http://localhost:3001/user/login. BrowserRouter relies on the HTML5 history API to implement routing.
Both HashRouter and BrowserRouter have a basename property, which should be set if your URL is not in the root directory of the website, but in a subdirectory. For example:
<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders as <a href="/calendar/today">
Route#
Route is a child element of Router, used to control which component is displayed based on the path. Commonly used attributes are exact, path, and component.
Consider the following code:
<Route path="/" exact component={HomePage} />
<Route path="/users" component={UsersPage} />
In react-router4, routes are inclusive, meaning multiple Routes can match and render at the same time. The exact attribute controls whether the route continues to match further paths after a successful match. In the above code, we are trying to render either the HomePage or UsersPage based on the path. If we remove the exact attribute from the Route, when we visit /users in the browser, both the HomePage and UsersPage components will be rendered.
Switch#
You can create multiple components at any position within the Router component, but usually we put them in the same location. Use the component to wrap a group of components. will iterate through its child elements (routes) and render the first one that matches the current path. Consider the following code:
<Switch>
<Route exact path="/" component={DashBoard} />
<Route path="/user" component={User} />
</Switch>
If we remove the Switch component, when we visit /user, the route will match both "/" and "/user", and both the DashBoard and User components will be rendered.
Link vs NavLink#
react-router4 provides two navigation APIs for page switching. When the page switches, the page is not reloaded, but the components are re-rendered. They have the same functionality, but NavLink provides additional styling capabilities when the URL is successfully matched.
Link
Link provides the to attribute to control the destination address, which can be a string or an object. For example:
<Link to="/courses"/>to: object
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>
NavLink
NavLink can provide a className for the currently matched link, which is commonly used in tab navigation.
<nav>
<NavLinkto="/app"exact activeClassName="active">Home</NavLink>
<NavLinkto="/app/users"activeClassName="active">Users</NavLink>
<NavLinkto="/app/products"activeClassName="active">Products</NavLink>
</nav>
Path Parameters#
In react-router4, match is used to retrieve parameters from the path. match is a prop passed to the component when rendering with , and can be accessed within the react component using this.props.match. Consider the following code:
<Switch>
<Route exact path="/" component={DashBoard} />
<Route path="/user/:id" component={User} />
<Route path="/user" component={User} />
</Switch>
When we visit http://localhost:3001/user/123, we can print the contents of this.props.match. The properties that can be accessed from match are:
Then, we can access the matched id using this.props.match.params.id.
withRouter#
Imagine a scenario where a component is not rendered with . How can we access the history, match, location, and other props? react-router4 provides a higher-order component called withRouter. Here's how to use it:
import { withRouter } from 'react-router-dom';
There are two ways to use withRouter. The first, more concise method is to use decorators, like this:
@withRouter
class AuthRoute extends React.Component {
}
The other method is to directly wrap the original component with withRouter to return a new component:
class Auth extends React.Component {
}
const AuthRoute = withRouter(Auth)
With either of these methods, you can use the router props within the component. For example:
const { match，location，history} = this.props;
Conclusion#
This article only covers some commonly used APIs and usage of react router4. There is still much more to learn, but this is a good starting point.