反应路由器链接更改网址但不是组件答案

【问题标题】：react router link changing url but not the component反应路由器链接更改网址但不是组件
【发布时间】：2021-04-10 14:05:27
【问题描述】：

当我在导航栏组件上使用链接时，它会更改 url 但不会更改组件，但是当我重新加载时它会更改组件，当我将链接放在主 app.js 中时，它会完美路由

app.js

import './App.css';
import Navbar from './Navbar/Navbar'
import About from './About/About'
import { Route, Link, BrowserRouter as Router ,Switch} from 'react-router-dom'
function App() {
return (
  <div>
      <Navbar/>
  
    <Router>
       <Link to="/about">about</Link>
    <Switch>
    <Route exact path="/about">
      <About/>
    </Route>
    </Switch>
   </Router>
</div>

 );
  }

export default App;

navbar.js

import React from 'react'
import './Navbar.css'
import { Link, Router, BrowserRouter} from 'react-router-dom';

function Navbar() {
    return (
       <div>
        <nav className="navbar">
            <div>
            <h1 className="nav_text">ExportGrains</h1>
            </div>
            <ul className="nav_ul">
                <BrowserRouter>
                <Link to="/about">about</Link>
                <li id="nav_li">HOME</li>
                <li id="nav_li">PRODUCTS</li>
                <li id="nav_li">ABOUT</li>
                <li id="nav_li">CONTACT</li>
                </BrowserRouter>
            </ul>
        </nav>
    </div>
)
}

export default Navbar

关于.js

 import React from 'react'

 function About() {
    return (
        <div>
            <h1>about page</h1>
        </div>
     )
}

 export default About;

如果能帮到我就太好了

【问题讨论】：

标签： reactjs react-router react-hooks

【解决方案1】：

应该是

import About from "...."
....
....
<Route path="/about" exact component={About} />

【讨论】：

【解决方案2】：

您应该为所有路线使用一个Router。问题是导航栏正在使用不同的路由器，而您的其他组件在另一个路由器内。所以删除导航栏中的路由器并在你的应用组件中使用单个路由器。

您也可以将Navbar 添加为默认路由并将其放在switch 的末尾，以便在上述路由均不匹配时匹配。

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Navbar />
        </Route>
      </Switch>
    </Router>
  );
}

Switch 渲染第一个匹配的子 <Route> 或 <Redirect> 位置。

function Navbar() {
  return (
    <div>
      <nav className="navbar">
        <div>
          <h1 className="nav_text">ExportGrains</h1>
        </div>
        <ul className="nav_ul">
            <Link to="/about">about</Link>
            <li id="nav_li">HOME</li>
            <li id="nav_li">PRODUCTS</li>
            <li id="nav_li">ABOUT</li>
            <li id="nav_li">CONTACT</li>
        </ul>
      </nav>
    </div>
  );
}

【讨论】：