The React Router Cheatsheet
Basic Router Setup
import { BrowserRouter as Router } from 'react-router-dom';
export default function App() {
return (
<Router>
{/* routes go here, as children */}
</Router>
);
}
Route Component
Basic declaration
import { BrowserRouter as Router, Route } from 'react-router-dom';
export default function App() {
return (
<Router>
<Route path="/about" component={About} />
</Router>
);
}
function About() {
return <>about</>
}
Render prop
import { BrowserRouter as Router, Route } from "react-router-dom";
export default function App() {
return (
<Router>
<Route path="/" render={() => <Home />} />
<Route path="/about" component={About} />
The React Router Cheatsheet 1
</Router>
);
}
function Home() {
return <>home</>;
}
function About() {
return <>about</>;
}
Alternate declaration
import { BrowserRouter as Router, Route } from "react-router-dom";
export default function App() {
return (
<Router>
<Route path="/about">
<About />
</Route>
</Router>
);
}
Visible on all routes
import { BrowserRouter as Router, Route } from "react-router-dom";
export default function App() {
return (
<Router>
<Navbar />
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
);
}
function Navbar() {
// visible on every page
return <>navbar</>
}
function Home() {
return <>home</>;
The React Router Cheatsheet 2
}
function About() {
return <>about</>;
}
Switch Component
Exact prop
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
export default function App() {
return (
<Router>
<Navbar />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}
Basic declaration
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
export default function App() {
return (
<Router>
<Navbar />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}
404 Route
The React Router Cheatsheet 3
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
export default function App() {
return (
<Router>
<Navbar />
<Switch>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="*" component={NotFound} />
</Switch>
</Router>
);
}
function NotFound() {
return <>You have landed on a page that doesn't exist</>;
}
Link Component
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
export default function App() {
return (
<Router>
<Navbar />
<Switch>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
)
}
NavLink Component
The React Router Cheatsheet 4
import {
BrowserRouter as Router,
Switch,
Route,
NavLink
} from "react-router-dom";
export default function App() {
return (
<Router>
<Navbar />
<Switch>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}
function Navbar() {
return (
<nav>
<NavLink
activeStyle={{
fontWeight: "bold",
color: "red"
}}
to="/"
>
Home
</NavLink>
<NavLink activeClassName="active" to="/about">
About
</NavLink>
</nav>
);
}
Redirect Component
Private Route component
import {
BrowserRouter as Router,
Switch,
Route,
Redirect
} from "react-router-dom";
The React Router Cheatsheet 5
export default function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<PrivateRoute path="/hidden" component={Hidden} />
</Switch>
</Router>
);
}
function PrivateRoute({ component: Component, ...rest }) {
// useAuth is some custom hook to get the current user's auth state
const isAuth = useAuth();
return (
<Route
{...rest}
render={(props) =>
isAuth ? <Component {...props} /> : <Redirect to="/" />
}
/>
);
}
function Home() {
return <>home</>;
}
function Hidden() {
return <>hidden</>;
}
useHistory Hook
import { useHistory } from "react-router-dom";
function About() {
const history = useHistory();
console.log(history.location.pathname); // '/about'
return (
<>
<h1>The about page is on: {history.location.pathname}</h1>
<button onClick={() => history.push('/')}>Go to home page</button>
</>
The React Router Cheatsheet 6
);
}
useLocation Hook
import { useLocation } from "react-router-dom";
function About() {
const location = useLocation();
console.log(location.pathname); // '/about'
return (
<>
<h1>The about page is on: {location.pathname}</h1>
</>
);
}
Dynamic Routes
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
export default function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/blog/:postSlug" component={BlogPost} />
</Switch>
</Router>
);
}
function Home() {
return <>home</>;
}
function BlogPost() {
return <>blog post</>;
}
The React Router Cheatsheet 7
useParams Hook
import React from "react";
import { BrowserRouter as Router, Switch, Route, useParams } from "react-router-dom";
export default function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/blog/:postSlug" component={BlogPost} />
</Switch>
</Router>
);
}
function Home() {
return <>home</>;
}
function BlogPost() {
const [post, setPost] = React.useState(null);
const { postSlug } = useParams();
React.useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/posts/${postSlug}`)
.then((res) => res.json())
.then((data) => setPost(data));
}, [postSlug]);
if (!post) return null;
return (
<>
<h1>{post.title}</h1>
<p>{post.description}</p>
</>
);
}
useRouteMatch Hook
import { useRouteMatch } from "react-router-dom";
function BlogPost() {
const isBlogPostRoute = useRouteMatch("/blog/:postSlug");
The React Router Cheatsheet 8
// display, hide content, or do something else
}
The React Router Cheatsheet 9
