Nav.Link 触发路由器答案

【问题标题】：Nav.Link trigger RouterNav.Link 触发路由器
【发布时间】：2019-08-11 08:49:08
【问题描述】：

simple example of how to use react-router

Know with react-bootstrap Nav.Link using bootstrap Navbar（配色方案）对简单示例进行了以下更改，但 Route 不再起作用。是否假设以编程方式检测点击并重定向到正确的页面/组件，或者通过点击路由器应该检测到正确的路径，如果是这样，需要如何改变才能工作？

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

【问题讨论】：

标签： reactjs react-redux react-bootstrap

【解决方案1】：

Use composition and render a Route 选项很好，即 Programmatically... 但仍然认为 Nav.Link 必须使用 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>
        )
    }
}

【讨论】：