使用 React 创建多页应用

  2. 贴士文章
  3. React 指南
  4. 使用 React 创建多页应用
Oluwafisayo Oluwatayo 2024年2月15日
React React Multiple Page
  1. 在 React 中创建多页应用程序
  2. 安装和部署 React 路由
使用 React 创建多页应用

本文将演示使用 React 创建一个多页 Web 应用程序，这是一个用于构建 US（用户界面）的 JavaScript 库。

在 React 中创建多页应用程序

首先，我们通过键入 npx create-react-app new-project 在终端中创建一个新项目，然后我们导航到应用程序文件夹并使用 npm start 启动应用程序。

在项目的 src 文件夹中，我们创建以下文件：

  1. Home.js
  2. About.js
  3. Projects.js
  4. Contact.js

然后我们在文本编辑器中打开 App.js 文件并将这段代码粘贴到下面。

代码片段 - App.js：

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Home from './Home';
import Projects from './Projects';
import Contact from './Contact';
import About from './About';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Link } from "react-router-dom";
import NavBar from './NavBar';

function App() {
    return (
        <div className="App">
            <NavBar />
            <Routes>
                <Route exact path="/" element={<Home />} />
                <Route exact path="/about" element={<About />} />
                <Route exact path="/projects" element={<Projects />} />
                <Route exact path="/contact" element={<Contact />} />
            </Routes>
        </div>
    );
}

export default App;

在 App.js 中，我们将从 react-router-dom 导入 Route 和 Link 并创建一个 navbar.js 以使我们能够浏览每个网页。以下是上述项目中创建的文件的片段。

代码片段 - navbar.js：

import React from 'react'
import {Link} from 'react-router-dom'

function NavBar(){
    return(
        <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/projects">Projects</Link></li>
            <li><Link to="/contact">Contact</Link></li>
        </ul>
    );
}

export default NavBar;

代码片段 - Home.js：

import React from 'react'

function Home(){
    return(
        <div>
            <h1>Welcome to my website!</h1>
        </div>
    )
}

export default Home;

代码片段 - About.js：

import React from 'react'

function About(){
    return(
        <div>
            <h1>About Me!</h1>
        </div>
    )
}

export default About;

代码片段 - Rpojects.js：

import React from 'react'

function Projects(){
    return(
        <div>
            <h1>My Projects</h1>
        </div>
    )
}

export default Projects;

代码片段 - Contact.js：

import React from 'react'

function Contact(){
    return(
        <div>
            <h1>Contact Me!</h1>
        </div>
    )
}

export default Contact;

安装和部署 React 路由

完成上述所有操作后，我们将安装 react-router -dom。在项目文件夹中打开终端，然后我们输入 npm install --save react-router-dom。

安装后，我们转到 index.js 文件，从 react-router-dom 导入 BrowserRouter 并将 BrowserRouter 包装在 ReactDOM.render 中。

代码片段 - index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { Route, Routes } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

完成后，我们应该能够点击每个链接并立即切换页面，如下面的输出。

输出：

使用 React 创建多页应用程序

作者： Oluwafisayo Oluwatayo
Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn