如何用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')
);

运行应用程序

 

现在我们已经完成了应用程序的开发，现在可以运行它并查看它的效果。打开终端并在项目根目录中运行以下命令：

npm start

或者

yarn start

这将启动开发服务器并在浏览器中打开应用程序。现在，我们可以在浏览器中访问 http://localhost:3000 查看我们的欢迎页面。我们也可以访问 http://localhost:3000/about 查看关于页面。

现在，我们已经学习了如何使用 React 和 React-Router 来构建一个简单的多页应用程序。当然，这只是一个简单的示例，我们可以根据自己的需要扩展它。同时，React-Router 还有很多其他功能，例如嵌套路由、路由参数等等。如果您想深入了解，请参阅官方文档。

 

 

原文链接：http://lao-zhao.com/post/16.html