React Router User Guide: How to implement front-end routing control

With the popularity of single-page applications, front-end routing has become an important part that cannot be ignored. As the most popular routing library in the React ecosystem, React Router provides rich functions and easy-to-use APIs, making the implementation of front-end routing very simple and flexible. This article will introduce how to use React Router and provide some specific code examples.

1. Install React Router

First, we need to install React Router. React Router can be installed through the npm command:

npm install react-router-dom

After the installation is completed, we can introduce the relevant components of React Router into the project.

2. Create routing component

Before using React Router, we need to create a routing component first. Normally, we would put the routing component in a separate file. In this file, we can use the Route component to define routing rules. The following is a simple example:

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

import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

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

export default App;

In the above code, we use the Switch component to ensure that only one route matches successfully. The exact attribute of the Route component specifies that the path must match exactly. The component attribute specifies the component that is rendered when the route is matched successfully.

3. Create the component corresponding to the routing

In the routing component, we need to create the corresponding sub-component. These child components will be rendered if the match is successful. The following is a simple example:

import React from 'react';

const Home = () => {
  return <h1>首頁</h1>
};

const About = () => {
  return <h1>關于我們</h1>
};

const NotFound = () => {
  return <h1>404頁面未找到</h1>
};

export { Home, About, NotFound };

In the above code, we created three components: Home, About and NotFound , used to display the corresponding page content.

4. Rendering the application

Finally, we need to render the application in the root component. Usually, we will use the BrowserRouter component to wrap the entire application, and use the routing component as its subcomponent. Here is an example:

import React from 'react';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

const Root = () => {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
};

export default Root;

5. Full example

Here is a complete example showing how to use React Router to implement front-end routing control:

// App.js

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

import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

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

export default App;

// components/Home.js

import React from 'react';

const Home = () => {
  return 
首頁
};

export default Home;

// components/About.js

import React from 'react';

const About = () => {
  return 
關于我們
};

export default About;

// components/NotFound.js

import React from 'react';

const NotFound = () => {
  return 
404頁面未找到
};

export default NotFound;

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './Root';

ReactDOM.render(, document.getElementById('root'));

The above code shows how to create a basic front-end routing control, including defining routing rules, creating corresponding components and rendering applications.

Summary:

React Router is a powerful and flexible front-end routing library that can help us implement routing control in single-page applications. Through simple configuration and use, we can create complex routing rules and easily control page switching and display. I hope this article will help you understand how to use React Router. If you need a deeper understanding of other functions and advanced usage of React Router, it is recommended to consult the official documentation.

The above is the detailed content of React Router User Guide: How to implement front-end routing control. For more information, please follow other related articles on the PHP Chinese website!