反应路由器使用

Question

我正在一个项目中测试 React Router（这是我第一次使用它），并且由于某种原因，当我单击“链接”时路由无法正常工作，但是当我直接在url，然后刷新页面，它可以工作，有人可以帮我吗？

代码如下：

应用组件

import React from "react";
import "./styles.css";

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import NavBar from "./components/NavBar";
import ProductList from "./components/ProductList";
import Home from "./components/Home";

export default function App() {
  return (
    <div className="App">
      <NavBar />
      <Router>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/products" component={ProductList} />
        </Switch>
      </Router>
    </div>
  );

NavBar 组件（目前，我还没有在链接中包含“我的购物车”）

import React from "react";

import { BrowserRouter as Router, Link } from "react-router-dom";

function NavBar() {
  return (
    <nav className="navbar navbar-light bg-dark p-3">
      <Router>
        <Link to="/">
          <i className="fas fa-gifts fa-2x text-light ml-2" />
        </Link>
        <Link to="/products" className="btn text-light bg-dark mr-2 ml-auto">
          Products
        </Link>
      </Router>
      <button className="btn text-light bg-dark">
        <i className="fas fa-shopping-cart" />
        My Cart
      </button>
    </nav>
  );
}

export default NavBar;

Answer 1

这个设置可以工作 -

对于 App.js

import React from "react";


import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import NavBar from "./components/NavBar";
import ProductList from "./components/ProductList";
import Home from "./components/Home";

export default function App() {
  return (
    <div >
      <Router>
        <Route path="/" component={NavBar} />
        <Route path="/" exact component={Home} />
        <Route path="/products" exact component={ProductList} />
      </Router>
    </div>
  );
}

对于 NavBar.js

import React from "react";

import { BrowserRouter as Router, Link } from "react-router-dom";

function NavBar() {
  return (
    <nav className="navbar navbar-light bg-dark p-3">

        <Link to="/">
          <i className="fas fa-gifts fa-2x text-light ml-2" />
          Home
        </Link>
        <Link to="/products" className="btn text-light bg-dark mr-2 ml-auto">
          Products
        </Link>
    </nav>
  );
}

export default NavBar;