如何使用 React.js 创建多页网站？

在本文中，我们将了解如何使用 React Js 创建一个简单的多页网站。

先决条件：

1. npm
2. 创建反应应用
3. 反应路由器dom
4. 样式化的组件

方法：我们将创建一个具有不同页面和导航栏的简单网站。 我们将创建多个页面主页、关于页面、博客页面、注册页面和联系页面，然后我们将了解如何在这些页面之间导航。我们将使用以下软件包和组件：

• react-router-dom： react-router-dom 是一个 reactJS 包，它使您能够在网页中实现动态路由。
• BrowserRouter：它使用 HTML5 历史 API 来保持 UI 与 URL 同步。
• Route：它的职责是在其路径与当前 URL 匹配时呈现 UI。
• Switch：它呈现与该位置匹配的第一个子 Route 或 Redirects。
• Styled-components： Styled-component Module 允许我们在 React 中以非常模块化和可重用的方式在 JavaScript 中编写 CSS。

下面是分步实现：

第 1 步：我们将使用create-react-app启动一个新项目，因此打开您的终端并输入：

npx create-react-app react-website

第 2 步：现在通过在终端中键入给定的命令转到您的文件夹：

cd react-website

第 3 步：通过在终端中键入给定命令来安装此项目所需的依赖项。

npm install react-router-dom 
npm install --save styled-components

第 4 步：现在在 src 中创建 components 文件夹，然后转到 components 文件夹并创建一个新文件夹名称 Navbar。在 Navbar 文件夹中创建两个文件 index、js 和 NavbarElements.js。在 src 名称页面中再创建一个文件夹，并在页面中创建文件名 about.js、blogs.js、index.js、signup.js、contact.js

项目结构：项目结构将如下所示：

第 5 步：现在我们将创建导航栏并为其设置样式。

index.js

import React from "react";
import { Nav, NavLink, NavMenu } 
    from "./NavbarElements";
  
const Navbar = () => {
  return (
    <>
      

        
          
            About
          
          
            Contact Us
          
          
            Blogs
          
          
            Sign Up
          
        
      
    
  );
};
  
export default Navbar;

导航栏元素.js

import { FaBars } from "react-icons/fa";
import { NavLink as Link } from "react-router-dom";
import styled from "styled-components";
  
export const Nav = styled.nav`
  background: #ffb3ff;
  height: 85px;
  display: flex;
  justify-content: space-between;
  padding: 0.2rem calc((100vw - 1000px) / 2);
  z-index: 12;
`;
  
export const NavLink = styled(Link)`
  color: #808080;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0 1rem;
  height: 100%;
  cursor: pointer;
  &.active {
    color: #4d4dff;
  }
`;
  
export const Bars = styled(FaBars)`
  display: none;
  color: #808080;
  @media screen and (max-width: 768px) {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 75%);
    font-size: 1.8rem;
    cursor: pointer;
  }
`;
  
export const NavMenu = styled.div`
  display: flex;
  align-items: center;
  margin-right: -24px;
  /* Second Nav */
  /* margin-right: 24px; */
  /* Third Nav */
  /* width: 100vw;
white-space: nowrap; */
  @media screen and (max-width: 768px) {
    display: none;
  }
`;

第6步：现在我们将在src/pages中编辑项目中的各个页面。

about.js

import React from "react";
  
const About = () => {
  return (
    

      

        GeeksforGeeks is a Computer 
        Science portal for geeks.
      
    
  );
};
  
export default About;

博客.js

import React from 'react';
  
const Blogs = () => {
  return (
    
You can write your blogs!
  );
};
  
export default Blogs;

index.js

import React from 'react';
  
const Home = () => {
  return (
    

      
Welcome to GeeksforGeeks
    
  );
};
  
export default Home;

注册.js

import React from 'react';
  
const SignUp = () => {
  return (
    

      
Sign Up Successful
    
  );
};
  
export default SignUp;

联系.js

import React from 'react';
  
const Contact = () => {
  return (
    

      
Mail us on [e-mail]
    
  );
};
  
export default Contact;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
  
ReactDOM.render(

    
,
document.getElementById('root')
);

应用程序.js

import React from 'react';
import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Routes, Route}
    from 'react-router-dom';
import Home from './pages';
import About from './pages/about';
import Blogs from './pages/blogs';
import SignUp from './pages/signup';
import Contact from './pages/contact';
  
function App() {
return (
    
    
    
        } />
        } />
        } />
        } />
        } />
    
    
);
}
  
export default App;

运行应用程序的步骤：现在运行上面的代码打开终端并输入以下命令。

npm start

输出：