React Routing Basics
Routing plays a very important role in front-end development. React Router is one of the most popular and commonly used third-party libraries in React, which allows you to divide your application into multiple pages, while performing page jumps and state management without refreshing the page.
React Router Installation and Configuration
First, we need to install React Router using npm.
npm install --save react-router-dom
Here we choose to download the react-router-dom dependency, which is the web version of React Router and provides a large number of APIs that are easy to understand and use.
import {
BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
ReactDOM.render(
<Router>
<Switch>
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/topics" component={
Topics} />
</Switch>
</Router>,
document.getElementById('root')
);
In the above code, we first imported the necessary components from react-router-dom to enable the routing function, then we used the BrowserRouter component to wrap our root component, and set multiple Route components in it to build the page path, each path matching a different Component rendering.
dynamic routing
Sometimes you need to set up dynamic routing, for example, when you need to carry some parameters and pass them to the page, passing parameters through the URL is usually a more direct and clear way.
<Router>
<div>
<ul>
<li>
<Link to="/blog/1">Blog 1</Link>
</li>
<li>
<Link to="/blog/2">Blog 2</Link>
</li>
<li>
<Link to="/blog/3">Blog 3</Link>
</li>
</ul>
<Switch>
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/blog/:id" component={
Blog} />
</Switch>
</div>
</Router>
In the above code, we define a dynamic path /blog/:id, which is used to match any blog page, where :id is a parameter that can be passed. When this parameter is changed, note that the component will re-render to reflect the changes.
function Blog(props) {
return (
<div>
<h2>Blog</h2>
<p>你现在正在看的博客 ID 是：{
props.match.params.id}</p>
</div>
);
}
Inside the Blog component, we directly get the :id parameter passed in the routing information and render it to the page.
at last
React Router is the most popular routing library in the React ecosystem. Through this article, we briefly introduced the basics of React Router and how to build and implement simple page jumps and dynamic routing. React Router also has more powerful features, such as programmatic routing, redirects and route guards, etc. If you are interested in these, you can dig into the details.