reactjs - React Router V5 renderar inte routen när man klickar på Link, men bakåt- och framåtknapparna fungerar?

Vad som verkar vara en enkel integration med react-router-dom ger oväntade resultat. När jag klickar på länkar i sidofältet fungerar Link-komponenten korrekt genom att generera URL:en, t.ex. localhost:3000/about, men jag stannar kvar på den tidigare visade sidan. När jag klickar på framåt- och bakåtpilarna renderar Route-komponenten korrekt komponent.

Jag använder Webpack och Typescript men tror inte att de borde påverka något.

"react": "^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>
      );
    };

Svar #1

Det är eftersom din Sidebar-komponent är innesluten i sin egen Router. Du vill att dina länkar och rutter ska dela samma överordnade Router. Ta bort din Sidebar Router så borde det lösa ditt problem.

    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>
      );
    };

Relaterade artiklar