Learning React Router
React Router (DOM) allows developers to create multiple-page projects with React through supporting using components as ‘pages’ for different URL routes.
Using <Link>
In the previous part, React Router was configured through setting up routes using the <BrowserRouter> and other components. Once configured, the component <Link> can be used to navigate around in the web application.
<Link> acts like the HTML element <a> (uses it internally, in fact), but needs an additional property, to, for indicating where the link should navigate to when used.
<Link to="/user">User</Link>
Like other components, it also needs to be imported from “react-router-dom” for use in a component or component-like function.
Consider the following code:
import React, {Component} from 'react';
import { Link } from 'react-router-dom';
class App extends Component {
render() {
return(
<div>
<p><Link to="/user">User</Link></p>
<p><Link to="/about">About</Link></p>
</div>
);
}
}
export default App;
Once imported, and a project is configured in its “index.js” to understand certain routes, the <Link> component can be imported and used as an <a> element normally would.
In fact, for a more light-weight solution for those projects generating sections where multiple links might be needed, a component-like function might be an easier solution.
Consider the following version of an “About” page using a function:
import React from "react";
import { Link } from 'react-router-dom';
function About() {
return(
<div>
<h1>About page</h1>
<Link to="/user">User</Link>
</div>
);
}
export default About;