React Router v5 未在我的网站中重定向

Question

我有一个所有人都可以访问的主要网站。我还有另一个页面，只有在您按下将您重定向到该页面的按钮后才能看到。我已经在我的 App.js 上实现了我的路线并放置了，但是当我点击按钮时，它不会将我重定向到指定的页面。

App.js:

import React, { useState, useEffect } from 'react';
import './App.css';
import Navbar from './Components/Navbar';
import Footer from './Components/Footer';
import Dropdown from './Components/Dropdown';
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 { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { Button } from 'react-bootstrap';

{/* Backend of Toggle function */ }
function App() {
  const [isOpen, setIsopen] = useState(false)

  const toggle = () => {
    setIsopen(!isOpen)
  }

  return (
    <>
      <Navbar toggle={toggle} />
      <Dropdown isOpen={isOpen} toggle={toggle} />
      <Switch>
        <Route path="/">
          <Hero />
          <AboutUs />
          <OurProgram />
          <Research />
          <Loan />
          <Footer />
        </Route>

        <Route path="/Gov">
          <Gov />
        </Route>

      </Switch>



    </>
  );
}

export default App;

link 使用：

<Link to="/Gov" className='bg-yellow-500 text-white font-bold p-5 mb-3  rounded-lg md:p-18 text-2xl '>Useful gov links</Link>

我该如何解决这个问题？

Answer 1

这是因为您的 Switch，正如其定义，您将始终位于主页，因为此 / 和此 /jfdf 都将与第一个匹配小路。解决方案可能是像这样更改顺序：

 <Switch>
    <Route path="/Gov">
      <Gov />
    </Route>
    <Route path="/">
      <Hero />
      <AboutUs />
      <OurProgram />
      <Research />
      <Loan />
      <Footer />
    </Route>      
 </Switch>

或者使用 exact 属性，像这样：

<Switch>
  <Route exact path="/">
    <Hero />
    <AboutUs />
    <OurProgram />
    <Research />
    <Loan />
    <Footer />
  </Route>

  <Route  path="/Gov">
    <Gov />
  </Route>

</Switch>

React Router v5 未在我的网站中重定向

React Router v5 not redirecting in my website

javascript

frontend

reactjs

react-router

react-router-dom