如何让我的多页网站在React中正确路由

Question

我正试图让一个多页面React网站正常工作，然而，我似乎无法让路线正常工作？有人能帮我解决我在这里看到的路线出了什么问题吗？

从本质上讲，我试图制作一个传统的网站，在那里你可以通过导航栏访问不同的页面。

TSYM给任何回复的人！！

App.js(这是路由发生的地方(

import React, { useState, useEffect } from 'react';
import './App.css';
import Navbar from './Components/Navbar';
import Footer from './Components/Footer';
import Hero from './Components/Hero';
import AboutUs from './Components/AboutUs';
import OurProgram from './Components/OurProgram';
import Research from './Components/Research';
import Data from './Components/Data';
import Loan from './Components/Loan';
import ScrollToTop from './Components/ScrollToTop';
import Gov from './Components/Gov';
import MoreAboutUs from './Components/MoreAboutUs';
import Farmer from './Components/Farmers';
import Supplier from './Components/Suppliers';
import Contact from './Components/Contact';

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
return (
<>
<Router>
<nav>
<Navbar />
<ScrollToTop />
</nav>
<Switch>
<Route exact path="/">
<Hero/>
<AboutUs />
<Footer />
</Route>
<Route exact path="/Our Program">
<OurProgram/>
<Footer />
</Route>
<Route exact path="/Research">
<Research/>
<Footer />
</Route>
<Route exact path="/Loan">
<Loan/>
<Footer />
</Route>
<Route exact path="/Contact">
<Contact/>
<Footer />
</Route>
<Route exact path="/Gov">
<Gov/>
<Footer />
</Route>
<Route exact path="/Farmer">
<Gov/>
<Footer />
</Route>
<Route exact path="/Supplier">
<Gov/>
<Footer />
</Route>

</Switch>
</Router>
</>
);
}
export default App;

Navbar.js(Navbar组件(

import React from 'react';
import { Link as Routerlink } from 'react-router-dom'
import Logo from './Images/LOGO.png';
import { Link, animateScroll as scroll } from "react-scroll";

const Navbar = () => {
return (
<nav className="sticky top-0 bg-white shadow-md z-50">
<div class="container mx-auto flex flex-wrap flex-col md:flex-row items-center">
<Link to="Hero" smooth={true} duration={500} class="flex title-font font-medium items-center text-green-900 mb-1 md:mb-0 cursor-pointer">
<img className='object-scale-down h-28 w-36 md:object-contain md:h-38 md:w-46' src={Logo} alt="" />
</Link>
<nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex-wrap items-center text-base justify-center md:block hidden">
<Link to="/" className='mr-5 hover:text-gray-900 cursor-pointer '>HOME</Link>
<Link to="/OurProgram" smooth={true} duration={500} className='mr-5 hover:text-gray-900 cursor-pointer'>AMING MGA PROGRAMA</Link>
<Link to="/Loan" smooth={true} duration={500} className='mr-5 hover:text-gray-900 cursor-pointer'>PAG-UTANG</Link>
<Link to="/Research" smooth={true} duration={500} className='mr-5 hover:text-gray-900 cursor-pointer'>PANANALIKSIK</Link>
<Link to="/" smooth={true} duration={500} className='mr-5 hover:text-gray-900 cursor-pointer'>PANANALIKSIK</Link>
<Link to="/Gov" smooth={true} duration={500} className='mr-5 hover:text-gray-900 cursor-pointer'>USEFUL GOV LINKS</Link>

</nav>
<div className='space-x-1 mb-2 md:block hidden'>
<a href="https://eagro.seelgubayambang.com/" class="inline-flex items-center bg-yellow-500 text-white font-bold border-0 py-2 px-3 focus:outline-none hover:bg-yellow-700 rounded text-base mt-4 md:mt-0">Login</a>
<a href="https://eagro.seelgubayambang.com/verify.php" class="inline-flex items-center bg-yellow-500 text-white font-bold border-0 py-2 px-3 focus:outline-none hover:bg-yellow-700 rounded text-base mt-4 md:mt-0">Register</a>
</div>
<div className=" flex items-center md:block mt-2 mb-2" >
<Link to="/" className="bg-yellow-500 text-white font-bold py-2 px-3 rounded-md md:hidden">Menu</Link>
</div>
</div>
</nav>
);

};
export default Navbar;

Answer 1

试试这个结构：

const location = useLocation();
<div>
<Navbar />
<div>
<Routes>
{location.pathname === "/" ? (
<Route path="/" element={<HomePage />} />
) : (
<>
<Route path="/Our Program" element={<OurProgram />} />
// And other Routes
<Route path="/research " element={<Research />} />
</>
)}
</Routes>
</div>
</div>;

我们可以使用userLocation((访问url路径名，并检查它是否在"/"路由上，如果是，我们显示主页，否则显示其他路由。

导航栏总是在顶部，主页和其他路线可以切换。

这是V6语法，但逻辑是相同的。

Answer 2

每个<Route>都应该返回一个div。

• 在您的情况下，您必须将多个组件封装在一个div中。例如：

<Route exact path="/">
<>
<Hero/>
<AboutUs />
<Footer />
</>
</Route>

Answer 3

使用Routes而不是Switch，因为Switch已弃用