React 路由器显示空白页面

Question

我为我的应用创建了一个新的子页面，当我尝试专门渲染组件时没有路由器，一切正常。但是当我添加路由器时，我可以通过它在页面之间切换，它只显示空白页面。甚至我的其他组件也不行。

这是我的代码 App.jsx:

import React from "react";

import Home from "./Home";
import Markets from "./Markets";

import { Navbar, Footer, Services, Transactions } from "./components";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => {
  return (
    <Router>
      <div className="min-h-screen">
        <div className="gradient-bg-welcome">
          <Navbar />
          <Switch>
            <Route path="/" component={<Home />} />
            <Route path="/Markets" component={<Markets />} />
          </Switch>
        </div>
        <Services />
        <Transactions />
        <Footer />
      </div>
    </Router>
  );
};

export default App;

Answer 1

在 react-router 的版本 6 中 switch 被 routes 取代。

注意：- routes只能有route。

import React from "react";

import Home from "./Home";
import Markets from "./Markets";

import { Navbar, Footer, Services, Transactions } from "./components";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

const App = () => {
  return (
    <Router>
      <div className="min-h-screen">
        <div className="gradient-bg-welcome">
          <Navbar />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/Markets"element={<Markets />} />
          </Routes>
        </div>
        <Services />
        <Transactions />
        <Footer />
      </div>
    </Router>
  );
};

export default App;

Answer 2

react-router-dom@6 不导出 Switch 组件。它被 Routes 组件取代。将 Switch 组件切换为 Routes 组件并在 element 属性上渲染路由组件。

示例：

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

const App = () => {
  return (
    <Router>
      <div className="min-h-screen">
        <div className="gradient-bg-welcome">
          <Navbar />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/Markets" element={<Markets />} />
          </Routes>
        </div>
        <Services />
        <Transactions />
        <Footer />
      </div>
    </Router>
  );
};

React 路由器显示空白页面

React router displays blank page

reactjs

react-router