React.js: Router
Table of Contents
React.js Router
One feature that most applications require is a navigation section where you can select the page you want to open.
On React.js you can achieve that by using the React Router package.
Installation
As the React Router package is not included by default in React.js, you have to install it before start using it.
The installation method depends on how you built your React.js application, either with the create-react-app utility or using CDN Links
Installation with npm
If you used the create-react-app utility, you have to execute the following command on a terminal windows on your project folder:
npm install react-router-dom
You can also install a specific version:
npm install react-router-dom@5.2.0
Installation with CDN Links
If you are using the CDN Links you will need to add the url to the react-router-dom package to your html page:
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
You can also put a specific version on the url:
<script src="https://unpkg.com/react-router-dom@5.2.0/umd/react-router-dom.min.js"></script>
Example
In this example, we have a navigation section with three instances of the Link component,
which when clicked will show up their corresponding associated component: Home, Component1,
or Component2.
We also have a Switch component, which wraps the three Route components
defined for the Link paths.
import React from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
function Home() {
return (
<div>Home</div>
);
}
function Component1() {
return (
<div>Component 1</div>
);
}
function Component2() {
return (
<div>Component 2</div>
);
}
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/comp1">One</Link>
</li>
<li>
<Link to="/comp2">Two</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/comp1">
<Component1 />
</Route>
<Route path="/comp2">
<Component2 />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
export default App;
Here is the same example but using CDN Links instead.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const Router = ReactRouterDOM.BrowserRouter;
const Route = ReactRouterDOM.Route;
const Link = ReactRouterDOM.Link;
const Switch = ReactRouterDOM.Switch;
function Home() {
return (
<div>Home</div>
);
}
function Component1() {
return (
<div>Component 1</div>
);
}
function Component2() {
return (
<div>Component 2</div>
);
}
ReactDOM.render(
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/comp1">One</Link>
</li>
<li>
<Link to="/comp2">Two</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/comp1">
<Component1 />
</Route>
<Route path="/comp2">
<Component2 />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>,
document.getElementById('root')
)
</script>
</body>
</html>
Live Demo
See a live demo of the above code on StackBlitz here.