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

【问题标题】：React Router Dom v5 not redirecting in my websiteReact Router Dom v5 未在我的网站中重定向
【发布时间】：2022-08-07 23:31:46
【问题描述】：

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

应用程序.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 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>

我该如何解决这个问题？

标签： javascript reactjs react-router frontend react-router-dom

【解决方案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>

【讨论】：