Ссылки не перенаправляют с React DOM Router

Question

Я пытаюсь использовать пакет react-dom-router в своем приложении React, но меня не "перенаправляют" успешно на компонент.Это работает только когда я обновляю страницу или получаю доступ через URL.

Это мой App.js:

import React, { Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

import NavMenu from "./components/NavMenu/NavMenu";
import Contact from "./components/Contact/Contact";
import Home from "./components/Home/Home";

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <NavMenu />

          <Route exact path='/' component={Home} />
          <Route path='/contact' component={Contact} />
        </div>
      </Router>
    );
  }
}

export default App;

Это код моего NavbarMenu компонента:

import React, { Component } from "react";
import { Navbar, Nav } from "react-bootstrap";
import { BrowserRouter as Router, Link } from "react-router-dom";

class NavMenu extends Component {
  render() {
    return (
      <Router>
        <Navbar bg='light' expand='lg'>
          <Navbar.Brand>Company name</Navbar.Brand>
          <Nav className='mr-auto'>
            <Nav.Link>
              <Link to='/'>Home</Link>
            </Nav.Link>
            <Nav.Link>
              <Link to='/contact'>Contact</Link>
            </Nav.Link>
          </Nav>
        </Navbar>
      </Router>
    );
  }
}

export default NavMenu;

Я думаю, код для Домашняя страница & Контакт компоненты не имеют отношения.

Итак, когда я захожу на страницу приложения React по умолчаниюhttp://localhost:3000/ Я вижу навигационную панель с их ссылками.Но когда я нажимаю на ссылку, URL-адрес изменяется, но ничего не происходит, пока я не обновлю страницу или не получу доступ по URL-адресу.

Я следовал этому руководству , чтобы сделать это.Есть идеи?

Answer 1

Это потому, что вы используете Router дважды, сначала в App.js, а затем снова в NavMenu.Нам нужно только обернуть контейнер приложения (точку входа) с помощью Router.

Удалите компонент <Router> из NavMenu.Напишите это так:

import React, { Component } from "react";
import { Navbar, Nav } from "react-bootstrap";
import { Link } from "react-router-dom";

class NavMenu extends Component {
  render() {
    return (
      <Navbar bg='light' expand='lg'>
        <Navbar.Brand>Company name</Navbar.Brand>
        <Nav className='mr-auto'>
          <Nav.Link>
            <Link to='/'>Home</Link>
          </Nav.Link>
          <Nav.Link>
            <Link to='/contact'>Contact</Link>
          </Nav.Link>
        </Nav>
      </Navbar>
    );
  }
}

export default NavMenu;