从未使用过路由器，但如果不导入路由，路由将无法工作

Question

如果我从 Main.js 中删除 Router 导入（我已经在 index.js 中使用了路由器，但从未在 Main.js 中使用过路由器）- [=14 中的应用程序页面=] 完全停止显示应用程序。在另一个 Router 中包装 Routes 也不起作用。我该怎么办？

index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

App.js:

import React from "react";

import Navigation from "./components/Navigation/Navigation.js";
import Main from "./components/Main/Main.js";

const App = () => {
  return (
    <div className="app">
      <Navigation />
      <Main />
    </div>
  );
};

export default App;

Main.js:

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

import Home from "../../pages/Home.js";
import Contacts from "../../pages/Contacts.js";
import About from "../../pages/About.js";
import CardList from "../../components/CardList/CardList.js";

const Main = () => (
  <>
    <Route exact path="/" component={Home}>
      <Redirect to="/products" />
    </Route>
    <Route path={["/products/:id", "/products"]} component={CardList} />
    <Route path="/about" component={About}></Route>
    <Route path="/contact" component={Contacts}></Route>
  </>
);

export default Main;

Answer 1

第一条路线应该在交换机之间

const Main = () => (
  <>
    <Switch>
      <Route exact path="/" component={Home}>
        <Redirect to="/products" />
      </Route>
      <Route path={["/products/:id", "/products"]} component={CardList} />
      <Route path="/about" component={About}></Route>
      <Route path="/contact" component={Contacts}></Route>
  <Switch/>
  </>
);

从未使用过路由器，但如果不导入路由，路由将无法工作

Router is never used, but Routes do not work without importing it

javascript

reactjs

react-router

react-router-v4

react-router-dom