Nav.Link trigger Router

Question

simple example of how to use react-router

Know with react-bootstrap Nav.Link using bootstrap Navbar (Color schemes) made the changes below for the simple example but the Route doesn't work anymore. Is it suppose to Programmatically detect the click and redirect to the correct page/component or by the click the Router should detect the correct path if so how what is need to change to work?

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

score 0 · Answer 1 · answered Mar 20 '19 at 16:15

Well went with the option of Use composition and render a Route that is Programmatically... but still think that Nav.Link must be using Link underline so there must be a way for it to trigger the route.

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

Nav.Link trigger Router

1 Answers1