时间戳

首页 > 解决方案 > 反应路由器链接更改网址但不是组件

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

问题描述

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

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

导航栏.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

about.js

 import React from 'react'

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

 export default About;

如果你能帮助我，那就太好了

标签： reactjsreact-routerreact-hooks

解决方案

您应该为所有路线使用一个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>
  );
}

推荐阅读