ReactJS引导导航栏和路由无法一起使用

Question

我正在尝试使用ReactJS创建一个简单的Webapp，我想使用NavbarReact-Bootstrap提供的。

我创建了一个Navigation.js文件，其中包含一个类，Navigation用于将Navbar和和路由与App.js文件分开。但是，这两个部分似乎都不起作用。当我加载页面时，它只是空的，没有导航栏。谁能发现一个错误？

Navigation.js：

import React, { Component } from 'react';
import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
import { Switch, Route } from 'react-router-dom';
import { Home } from './Page';

class Navigation extends Component {
    render() {
        return (
            <div>
                <div>
                    <Navbar>
                        <Navbar.Brand href="/">React-Bootstrap</Navbar.Brand>
                        <Navbar.Collapse>
                            <Nav className="mr-auto">
                                <NavItem eventkey={1} href="/">
                                    <Nav.Link href="/">Home</Nav.Link>
                                </NavItem>
                            </Nav>
                            <Form inline>
                                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                                <Button variant="outline-success">Search</Button>
                            </Form>
                        </Navbar.Collapse>
                    </Navbar>
                </div>
                <div>
                    <Switch>
                        <Route exact path='/' component={Home} />
                        <Route render={function () {
                            return <p>Not found</p>
                        }} />
                    </Switch>
                </div>
            </div>
        );
    }
}

export default Navigation;

App.js：

import React, { Component } from 'react';
import Navigation from './components/routing/Navigation';



class App extends Component {
  render() {
    return (
      <div id="App">
        <Navigation />
      </div>
    );
  }
}

export default App;

我尝试使用已经NavItem包含的LinkContainerfrom react-router-bootstrap，这导致了相同的结果。

仅出于完整性考虑，Page.js：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export const Page = ({ title }) => (
    <div className="App">
      <div className="App-header">
        <h2>{title}</h2>
      </div>
      <p className="App-intro">
        This is the {title} page.
      </p>
      <p>
        <Link to="/">Home</Link>
      </p>
      <p>
        <Link to="/about">About</Link>
      </p>
      <p>
        <Link to="/settings">Settings</Link>
      </p>
    </div>
);


export const About = (props) => (
    <Page title="About"/>
);

export  const Settings = (props) => (
    <Page title="Settings"/>
);

export const Home = (props) => (
    <Page title="Home"/>
);

Answer 1

首先，在您的代码片段中，似乎并没有将代码包装在中Router，因此您应确保在内部App或内部进行操作ReactDOM.render：

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, 
  rootElement
  );

接下来，您的特定问题是您呈现的是react-bootstrap Nav.Link而不是react-router的Link组件，因此路由器不会处理您的路由更改。幸运的是，react-bootstrap在其大多数组件中都提供了一个渲染道具，以指定您要渲染的组件或元素（如果您不希望使用默认值）。切换到这样的东西：

import { Switch, Route, Link } from 'react-router-dom';

class Navigation extends Component {
  render() {
    return (
      <div>
        <div>
          <Navbar>
            <Navbar.Brand as={Link} to="/" >React-Bootstrap</Navbar.Brand>
            <Navbar.Collapse>
              <Nav className="mr-auto">
                <NavItem eventkey={1} href="/">
                  <Nav.Link as={Link} to="/" >Home</Nav.Link>
                </NavItem>
              </Nav>
              <Form inline>
                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                <Button variant="outline-success">Search</Button>
              </Form>
            </Navbar.Collapse>
          </Navbar>
        </div>
        <div>
          <Switch>
            <Route exact path='/' component={Home} />
            <Route render={function () {
              return <p>Not found</p>
            }} />
          </Switch>
        </div>
      </div>
    );
  }
}

Answer 2

对于那些在 react-bootstrap 导航栏中对样式Link组件有问题的人react-router-dom，只需添加className="nav-link"，如下所示：

<Link to="/" className="nav-link">Home</Link>

代替

<Nav.Link href="/">Home</Nav.Link>

Answer 3

我希望我能及时帮助其他一些试图解决这个问题的人。

\n

您可以使用 NavLink，而不是 as={NavLink}。它将以与 Link 相同的行为进行渲染，但会“监视”路由器 URL 来定义哪个链接确实处于活动状态：

\n

<Nav defaultActiveKey="/bills" as="ul">\n      <Nav.Item as="li">\n        <Nav.Link as={NavLink} to="/bills">Dividas</Nav.Link>\n      </Nav.Item>\n      <Nav.Item as="li">\n        <Nav.Link as={NavLink} to="/other">Em constru\xc3\xa7\xc3\xa3o</Nav.Link>\n      </Nav.Item>\n    </Nav>\n

\n