SoFunction
Updated on 2025-04-14

Sample code for implementing page navigation using React routing

What is React Router?

React Router is a standard routing library for React applications, which allows you to quickly and simply implement routing functions in single-page applications (SPA). With React Router, you can easily navigate between components without reloading the entire page.

Install React Router

To use React Router in your project, you first need to install it into your React app. Run the following command on the command line:

npm install react-router-dom

After the installation is complete, we can start configuring React Router.

Basic usage

Create a basic route

First, we need to set up the route in the application. Create a new React component, e.g.Home, About, andContact, these components will represent different pages.

// src/
import React from 'react';

const Home = () => {
  return <h1>Welcome to the homepage！</h1>;
};

export default Home;

// src/
import React from 'react';

const About = () => {
  return <h1>about Us</h1>;
};

export default About;

// src/
import React from 'react';

const Contact = () => {
  return <h1>Contact Us</h1>;
};

export default Contact;

Next, configure Router in the main component. existsrc/The following modifications are made:

// src/
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home page</Link></li>
            <li><Link to="/about">about Us</Link></li>
            <li><Link to="/contact">Contact Us</Link></li>
          </ul>
        </nav>
        
        {/* Use Switch to make sure that only one Route is rendered at a time */}
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

In the above code, we useBrowserRouterComponents to wrap the entire application.LinkComponents are used to create navigation between different pages, andRouteComponents define components rendered in a specific path.

Running example

Now you can start the project with the following command:

npm start

Visit http://localhost:3000 in your browser and you will see the navigation list. After clicking on the "About Us" and "Contact Us" links, the page content will change instantly without reloading.

Advanced usage

Nested routing

React Router supports nested routing. If your application has a more complex structure, such as a subpage under a user page, you can do this:

First, create a User component and add subroutines to it.

// src/
import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';

const User = ({ match }) => {
  return (
    <div>
      <h2>User Page</h2>
      <ul>
        <li><Link to={`${}/profile`}>Personal Profile</Link></li>
        <li><Link to={`${}/settings`}>set up</Link></li>
      </ul>

      <Switch>
        <Route path={`${}/profile`} component={UserProfile} />
        <Route path={`${}/settings`} component={UserSettings} />
      </Switch>
    </div>
  );
};

const UserProfile = () => {
  return <h3>用户Personal Profile</h3>;
};

const UserSettings = () => {
  return <h3>用户set up</h3>;
};

export default User;

Then, add the route definition of the User component in the main route:

// src/
import User from './User';

// Add User's route inside Switch<Route path="/user" component={User} />

Utilize routing parameters

React Router also supports dynamic routing parameters, which allows you to pass parameters in the URL.

// src/
const User = ({ match }) => {
  return (
    <div>
      <h2>User Page</h2>
      <ul>
        <li><Link to={`${}/1`}>user1</Link></li>
        <li><Link to={`${}/2`}>user2</Link></li>
      </ul>
      
      <Switch>
        <Route path={`${}/:userId`} component={UserDetail} />
      </Switch>
    </div>
  );
};

// User Details Componentconst UserDetail = ({ match }) => {
  return <h3>userID: {}</h3>;
};

Now, when you access /user/1 or /user/2, it will display the corresponding user ID.

Summarize

Through this blog, we learned how to use React Router in React to implement page navigation. We start with the basic routing settings and gradually deepen the use of nested routing and dynamic routing parameters.

No matter how complex your application is, React Router will provide you with flexible and powerful routing solutions to help you build a more user-friendly experience.

This is the article about the example code of page navigation using React routing. For more related page navigation content, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!