单击链接时React Router V5不渲染路由，但后退和前进按钮有效？

Posted 2023-02-22

【中文标题】单击链接时React Router V5不渲染路由，但后退和前进按钮有效？

【英文标题】：React Router V5 not rendering route when clicking Link, but back and forward buttons work?

【发布时间】：2020-06-03 01:58:17

【问题描述】：

看似与 react-router-dom 的简单集成却产生了意想不到的结果。当我单击侧边栏中的链接时，链接组件通过生成 url 即正常工作。 localhost:3000/about，但我仍停留在上一个查看页面。当我单击前进和后退按钮时，Route 会呈现正确的组件。

我正在使用 Webpack、Typescript，但我认为它们不会影响任何东西。

“反应”：“^16.12.0”，

"react-router-dom": "^5.1.2"

    //App Component
    import * as React from 'react';
    import  BrowserRouter as Router, Link, Route  from 'react-router-dom';

    import Sidebar from './Sidebar';
    import Home from './Home';
    import About from './About';
    import Work from './Work';
    import Contact from './Contact';
    import Skills from './Skills';

    const App: React.FC = () => 
      return (
        <Router>
          <div className="main-container">
            <Sidebar />
            <Route exact path="/"><Home /></Route>
            <Route path="/about"><About /></Route>
            <Route path="/skills" component=Skills></Route>
            <Route path="/work" component=Work></Route>
            <Route path="/contact" component=Contact></Route>
          </div>
        </Router>
      );
    ;

    //Sidebar Component
    import * as React from 'react';
    import  BrowserRouter as Router, Route, Link  from 'react-router-dom';

    import HomeIcon from '@material-ui/icons/Home';
    import FaceIcon from '@material-ui/icons/Face';
    import WorkIcon from '@material-ui/icons/Work';
    import CodeIcon from '@material-ui/icons/Code';
    import MailOutlineIcon from '@material-ui/icons/MailOutline';

    const Sidebar: React.FC = props => 
      return (
        <Router>
          <nav className="nav-container ">
            <Link to='/'><HomeIcon /></Link>
            <Link to='/about'><FaceIcon /></Link>
            <Link to='/skills'><CodeIcon /></Link>
            <Link to='/work'><WorkIcon /></Link>
            <Link to='/contact'><MailOutlineIcon /></Link>
          </nav>
        </Router>
      );
    ;

【参考方案1】：

这是因为您的侧边栏组件被包装在自己的路由器中。您希望您的链接和路由共享同一个父路由器。删除您的侧边栏路由器，它应该可以解决您的问题。

    const Sidebar: React.FC = props => 
      return (
          <nav className="nav-container ">
            <Link to='/'><HomeIcon /></Link>
            <Link to='/about'><FaceIcon /></Link>
            <Link to='/skills'><CodeIcon /></Link>
            <Link to='/work'><WorkIcon /></Link>
            <Link to='/contact'><MailOutlineIcon /></Link>
          </nav>
      );
    ;

【讨论】：

我在哪里可以送花给你。