Home >Web Front-end >JS Tutorial >Mastering React Routing: A Complete Guide to Navigating Your Application

Mastering React Routing: A Complete Guide to Navigating Your Application

Susan Sarandon
Susan SarandonOriginal
2024-10-04 06:20:29408browse

Mastering React Routing: A Complete Guide to Navigating Your Application

1. Introduction to React Router

React Router is a library for handling routing in React applications. It allows your app to navigate between different components and views without a full-page reload, making the user experience seamless.


2. Basic Setup

Start by installing react-router-dom:

npm install react-router-dom

Set up basic routing using BrowserRouter, Routes, and Route:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

3. Nested Routing

For more complex apps, you can nest routes. Here’s how to set up nested routes in a parent component:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Dashboard = () => <h2>Dashboard Home</h2>;
const Profile = () => <h2>Your Profile</h2>;

const DashboardLayout = () => {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Home</Link>
        <Link to="/dashboard/profile">Profile</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="profile" element={<Profile />} />
      </Routes>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/dashboard/*" element={<DashboardLayout />} />
      </Routes>
    </Router>
  );
};

export default App;

4. Dynamic Routing

Dynamic routing allows you to pass parameters in the URL. Here’s how to define and access a dynamic route:

import { useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
};

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/user/1">User 1</Link>
        <Link to="/user/2">User 2</Link>
      </nav>

      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </Router>
  );
};

export default App;

5. Protected Routes

To implement protected routes, you can create a custom PrivateRoute component:

import { Navigate, Outlet } from 'react-router-dom';

const useAuth = () => {
  const user = { loggedIn: true }; // Replace with actual auth logic
  return user && user.loggedIn;
};

const PrivateRoute = () => {
  const isAuth = useAuth();
  return isAuth ? <Outlet /> : <Navigate to="/login" />;
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<PrivateRoute />}>
          <Route path="" element={<Dashboard />} />
        </Route>
      </Routes>
    </Router>
  );
};

export default App;

6. Programmatic Navigation

Sometimes, you may want to navigate programmatically, like after a form submission. Use the useNavigate hook in React Router v6:

import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Login logic here...
    navigate('/dashboard');
  };

  return (
    <div>
      <h2>Login</h2>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

7. 404 Pages

Handle 404 (Not Found) errors by creating a catch-all route:

const NotFound = () => <h2>404 - Page Not Found</h2>;

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

export default App;

8. Performance Considerations

For large applications, lazy loading routes can improve performance. Here’s how to implement lazy loading with React.lazy() and Suspense:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
};

export default App;

The above is the detailed content of Mastering React Routing: A Complete Guide to Navigating Your Application. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn