React Router Tutorial Docs

This is a comprehensive guide to understanding and using React Router for routing in your React applications. Whether you're new to React Router or looking to enhance your existing knowledge, this tutorial is designed to get you up to speed with ease.

Installation

To get started, make sure you have react-router-dom installed in your project:

npm install react-router-dom

Basics

React Router provides a way to handle navigation and route handling in your React application. Here's a simple example:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

Nested Routes

Nested routes allow you to create sub-routes within your application. This can be particularly useful for creating a navigation menu:

<Switch>
  <Route path="/" exact component={Home} />
  <Route path="/about">
    <Route path="/about/team" component={Team} />
    <Route path="/about/history" component={History} />
  </Route>
  <Route path="/contact" component={Contact} />
  <Route component={NotFound} />
</Switch>

Link Component

The Link component is used to create navigable links in your application. It is similar to the <a> tag, but it doesn't cause a full page reload:

<Link to="/about">About</Link>

Redirect

Use the Redirect component to redirect users from one path to another:

<Redirect from="/" to="/home" />

Conclusion

React Router is a powerful tool for creating dynamic and navigable React applications. By following this tutorial, you should have a solid understanding of the basics and be ready to implement routing in your own projects.

For more information and advanced usage, check out our Advanced React Router Tutorial.