Question

simple example of how to use react-router

了解如何使用bootstrap Navbar（配色方案）的react-bootstrap Nav.Link对简单示例进行了以下更改，但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>
        )
    }
}

Answer 1

很好地使用了Use composition and render a Route的选项，该选项以编程方式...但是仍然认为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>
        )
    }
}

导航链接触发路由器

1 个答案: