React Router的使用情况

Question

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

这里是代码：

应用组件

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;