无法在特定路由中呈现正确的组件答案

【问题标题】：Unable to render the right component in a specific route无法在特定路由中呈现正确的组件
【发布时间】：2021-03-06 14:12:37
【问题描述】：

我想在路由“/login”中渲染LoginForm组件。但是，当我单击标题中的 LOG IN 链接时，URL 端点不会更改，并且会呈现 Products 组件。我做错了什么？

代码sn-ps如下：应用.js

import React from "react";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Products from "./components/Products";
import { Route, Switch } from "react-router-dom";
import SingleProductView from "./components/SingleProductView";
import Cart from "./components/Cart";
import LoginForm from "./components/LoginForm";

const App = () => {
  return (
    <>
      <Header />
      <main className="py-3">
        <Container>
          <Switch>
            <Route path="/login" component={LoginForm} />
            <Route path="/product/:id" component={SingleProductView} />
            <Route path="/cart/:id?" component={Cart} />
            <Route path="/" component={Products} exact />
          </Switch>
        </Container>
      </main>
      <Footer />
    </>
  );
};

export default App;

Header.js

import React from "react";
import { LinkContainer } from "react-router-bootstrap";
import { Navbar, Nav, Container } from "react-bootstrap";

const Header = () => {
  return (
    <header>
      <Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect>
        <Container>
          <LinkContainer to="/">
            <Navbar.Brand>ProShop</Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              <LinkContainer to="/cart">
                <Nav.Link>
                  <i className="fas fa-shopping-cart"></i>cart
                </Nav.Link>
              </LinkContainer>
              <LinkContainer to="/login">
                <Nav.Link>
                  <i className="fa fa-user"></i>Log In
                </Nav.Link>
              </LinkContainer>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </header>
  );
};

export default Header;

【问题讨论】：

我根据您的代码创建了一个丑陋但有效的示例。它对我来说很好，而且看起来是正确的。因此，您的代码的其他部分可能存在问题（codesandbox.io/s/crazy-cannon-ll8d9?file=/src/App.js）

标签： reactjs react-router react-router-dom

【解决方案1】：

您必须从 react-router-dom 导入 BrowserRouter 并使用 BrowserRouter 组件包装您的所有路由。

【讨论】：

我在 Index.js 中这样做。 ReactDOM.render( , document.getElementById("root") );

【解决方案2】：

只需在App.js 中更新此导入语句 import {BrowserRouter, Route, Switch } from "react-router-dom";

并在 App.js 中更新这段代码

<BrowserRouter>

 <Switch>
       <Route path="/login" component={LoginForm} />
        <Route path="/product/:id" component=. {SingleProductView} />
        <Route path="/cart/:id?" component={Cart} />
        <Route path="/" component={Products} exact />
</Switch>

</BrowserRouter>

【讨论】：