组件不使用 React Router 和 React Bootstrap 渲染

Question

试图让网页呈现 Resources.js 组件。 但是，唯一改变的是 url 路由 (<www.examplesite/resources>)。 主页组件保留在屏幕上，永远不会被资源组件替换。 曾尝试使用 Nav.Item 标签而不是 Nav.Link 标签。 也试过用Link Container 来包装Nav.Link 和Nav.Item，都没有效果。 enter code here

      import React from 'react';
      import { BrowserRouter, Route, NavLink, Switch, withRouter, Link } from 'react-router-dom';
      import Nav from 'react-bootstrap/Nav';
      import Navbar from 'react-bootstrap/Navbar';
      import NavDropdown from 'react-bootstrap/NavDropdown';
      import { LinkContainer } from 'react-router-bootstrap';
      import Home from './components/Home';
      import Resources from './components/Resources';


      class App extends Component {

        render () {
          return (
      <React.Fragment>
      <BrowserRouter>
        <Switch>
          <Route to='/' exact render={() => (<Home/>)} />
          <Route to='/resources' exact render={() => (<Resources/>)} />
        </Switch>
        <Navbar id='make_gray' bg="light" expand="lg" fixed='top'>
          <Navbar.Toggle aria-controls="basic-navbar-nav"/>
          <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <NavDropdown title={'Link Dropdown'} id="basic-nav-dropdown">
              <Nav.Link as={Link} exact to="/resources">link to resources</Nav.Link>
              <NavDropdown.Divider />
              <Nav.Link as={Link} exact to="/resources">link to resources</Nav.Link>
            </NavDropdown>
          </Nav>
          </Navbar.Collapse>
        </Navbar>
      </BrowserRouter>
      </React.Fragment>
          )
      }
      }

Answer 1

必须将我的路由组件中的所有“to”属性替换为“path”属性。