Nav.Link триггер Роутер

Question

простой пример использования реакции-маршрутизатора

Знать с помощью response-bootstrap Nav.Link с помощью bootstrap Navbar (Цветовые схемы) внесли изменения, приведенные ниже, для простого примера, но маршрут больше не работает. Предполагается ли программно обнаруживать щелчок и перенаправление на правильную страницу / компонент или щелчком маршрутизатор должен определить правильный путь, если да, то как, что нужно изменить, чтобы работать?

function Header() {
    return(
        <NavbarMenu />
    )
 /* 
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/topics">Topics</Link>
      </li>
      <li>
        <Link to="/weather">Weather</Link>
      </li>      
    </ul>
  );
  */
}

class NavbarMenu extends Component{
    render(){
        return (
            <Navbar fixed="top" bg="dark" variant="dark">
                <Navbar.Brand href="#home">Navbar</Navbar.Brand>
                <Nav className="mr-auto">
                  <Nav.Link href="#home">Home</Nav.Link>
                  <Nav.Link href="#about">About</Nav.Link>
                  <Nav.Link href="#topics">Topics</Nav.Link>
                  <Nav.Link href="#weather">Weather</Nav.Link>
                </Nav>
                <Form inline>
                  <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                  <Button variant="outline-info">Search</Button>
                </Form>
            </Navbar>
        )
    }
}

Answer 1

Хорошо пошло с опцией Использовать композицию и визуализировать маршрут , который программно ... но все же подумайте, что Nav.Link должен использовать подчеркивание ссылки, поэтому для него должен быть способ вызвать маршрут.

class NavbarMenu extends Component{
    render(){
        return (
            <Navbar fixed="top" bg="dark" variant="dark">
                <Navbar.Brand href="#home">Navbar</Navbar.Brand>
                <Nav className="mr-auto">
                  <Link to="/weather">Weather Link</Link>
                  <Route render={({ history}) => (<Nav.Link onClick={() => { history.push('/home') }}>Home</Nav.Link>)} />
                  <Route render={({ history}) => (<Nav.Link onClick={() => { history.push('/about') }}>About</Nav.Link>)} />
                  <Route render={({ history}) => (<Nav.Link onClick={() => { history.push('/topics') }}>Topics</Nav.Link>)} />
                  <Route render={({ history}) => (<Nav.Link onClick={() => { history.push('/weather') }}>Weather</Nav.Link>)} />
                </Nav>
                <Form inline>
                  <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                  <Button variant="outline-info">Search</Button>
                </Form>
            </Navbar>
        )
    }
}