React路由不使用自定义导航栏

Question

我正在使用在NPM上找到的自定义导航栏库来呈现我的导航栏，但是自定义导航栏中的navlinks不起作用。当我单击链接时，地址栏中的路由将更新，但组件并未呈现。尽管在使用简单列表时，我能够呈现所有路由。

CodeSandbox Example to Replicate

function App() {

return (
    <React.Fragment>
        /* This custom navbar is not working for routing */
        <Navbar></Navbar>

        /* This list is working fine for routing */
        {/* <ul>
            <li>
                <NavLink to='/'>Home</NavLink>
            </li>
            <li>
                <NavLink to='/about'>About</NavLink>
            </li>
            <li>
                <NavLink to='/contact'>Contact</NavLink>
            </li>
        </ul> */}

        <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/contact' component={Contact} />
        </Switch>
    </React.Fragment>
  );
}

这是我正在使用的自定义导航栏组件：Custom Navbar

Answer 1

您可能忘记用<Router> or <BrowserRouter>包装您的代码。

试穿：

import {BrowserRouter, Router} from "react-router-dom";

 <BrowserRouter>
            <React.Fragment>
                ...
            </React.Fragment>
  </BrowserRouter>

或

<Router>
            <React.Fragment>
                ...
            </React.Fragment>
</Router>