无法使用React Router和React Bootstrap渲染组件

debugcn 发表于 Dev

克里斯·罗斯

尝试获取网页以呈现Resources.js组件。但是，唯一更改的是URL路由（<www.examplesite / resources>）。主页组件保留在屏幕上，并且永远不会被资源组件替代。尝试使用Nav.Item标签代替Nav.Link标签。还尝试过使用链接容器包装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>
          )
      }
      }

克里斯·罗斯

必须将我的路径组件中的所有“至”属性替换为“路径”属性。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。