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

如果我从

Main.js

中删除

Router

导入（我一直在

index.js

中使用Router，并且路由器从未在

Main.js

中使用过），那么

Main.js

中的应用程序页面将完全停止显示应用程序。在另一个路由器中包装

路由

s也不起作用。我该怎么办

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")
);

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;

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;

从“React”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
从“react Router dom”导入{BrowserRouter as Router}；
ReactDOM.render(
,
document.getElementById（“根”）
);

App.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")
);

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;

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;

从“React”导入React；
从“/components/Navigation/Navigation.js”导入导航；
从“/components/Main/Main.js”导入Main；
常量应用=（）=>{
返回(
);
};
导出默认应用程序；

Main.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")
);

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;

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;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Redirect}；
从“../../pages/Home.js”导入主页；
从“../../pages/Contacts.js”导入联系人；
从“../../pages/About.js”导入关于；
从“../../components/CardList/CardList.js”导入卡片列表；
常量Main=（）=>(
);
导出默认主；

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

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/>
  </>
);

const Main=（）=>(
);

删除冗余导入，重新启动devserver并硬刷新浏览器，这看起来像是一个奇怪的问题，可能只是一些内部错误。@JohnSmith完成了所有这些，但仍然无法工作。没有错误，应用程序正常工作，只是页面没有显示在浏览器中的

Main

@John check中dev tools maybe元素在DOM中，您无法查看see@Rostyslav选中的。它不在那里。是吗，现在页面显示，但在浏览器页面刷新之前不要切换。使用和不使用

UPD都进行了尝试：我导入了

交换机、路由、重定向

而不是

浏览器路由器

，它现在可以工作了。这是为什么？浏览器路由器使用HTML5历史API（pushState、replaceState和popstate事件）使您的UI与URL保持同步。和开关渲染与位置匹配的第一个子对象或。我建议你去找react-router-6，他们会带来新的变化，稍微改变一下，让事情变得更简单