如何用React和React-Router实现一个简单的多页面应用

React 是一个非常流行的 JavaScript 库，用于构建单页应用程序。然而，有时候我们需要构建一个多页应用程序，这时候可以使用 React-Router 来实现。在本文中，我们将学习如何使用 React 和 React-Router 来实现一个简单的多页面应用程序。

安装 React 和 React-Router

首先，我们需要安装 React 和 React-Router。我们可以使用 npm 或者 yarn 来安装它们。打开终端并输入以下命令：

npm install react react-dom react-router-dom

或

yarn add react react-dom react-router-dom

创建多个页面

在一个多页应用程序中，每个页面都需要有一个独立的 URL。在 React-Router 中，我们可以使用 Route 组件来定义 URL 和页面之间的映射关系。在我们的示例中，我们将创建两个页面：Home 和 About。

首先，在项目根目录中创建一个名为 pages 的文件夹，并在其中创建两个文件：Home.js 和 About.js。在 Home.js 中，我们将创建一个简单的欢迎页面，代码如下：

import React from 'react';
const Home = () => {
  return (
    <div>
      <h1>Welcome to our website!</h1>
      <p>We are excited to have you here.</p>
    </div>
  );
};
export default Home;

在 About.js 中，我们将创建一个关于页面，代码如下：

import React from 'react';
const About = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>We are a small team of developers who love building web applications.</p>
    </div>
  );
};
export default About;

创建路由

现在我们需要在我们的应用程序中创建一个路由，用于将 URL 映射到相应的页面。在 App.js 文件中，我们可以使用 Switch 和 Route 组件来定义路由。在我们的示例中，我们将创建两个路由：一个用于将 URL / 映射到 Home 页面，另一个用于将 URL /about 映射到 About 页面。

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
const App = () => {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
};
export default App;

渲染应用程序

现在我们需要将我们的应用程序渲染到页面上。在 index.js 文件中，我们可以使用 ReactDOM.render 函数来渲染我们的应用程序。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);