Блог

Я использую пользовательскую библиотеку навигационной панели, которую я нашел в NPM, для рендеринга моей навигационной панели, но navlinks в пользовательской навигационной панели они не работают. Когда я нажимаю на ссылки, маршрут обновляется в адресной строке, но компонент не отображается. Хотя при использовании простого списка я могу отобразить все маршруты.

Пример CodeSandbox для репликации

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

Это пользовательский компонент панели навигации, который я использую: Пользовательская панель навигации

вы можете забыть обернуть свой код с <Router> or <BrowserRouter> помощью .

Примерьте:

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

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

 

или

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