React Router Dom 路由返回空白页答案

【问题标题】：React Router Dom routes are returning blank pagesReact Router Dom 路由返回空白页
【发布时间】：2022-07-19 21:10:15
【问题描述】：

我的路线设置返回一个没有错误的空白页面，唯一显示的是侧面菜单。我不知道我做错了什么？

App.js：

import React from "react";
import Sidebar from "./components/Sidebar";
import i18n from './i18n';
import Dash from "./pages/Dash";
import Prof from "./pages/Prof";
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

 function App() {
  return (
   <Router>
    <Sidebar/>
    <Routes>
     <Route path='/' exact component={Dash} />
     <Route path='/profile' exact component={Prof} />
    </Routes>
  </Router>
 );
}
export default App;

Dash.js：

import React from "react";
import Dashboard from ".././components/Dashboard";
export default function Dash() {
 return (
<>
  <Dashboard />
</>
);
}

Prof.js：

import React from "react";
import Dashboard from ".././components/Profile";
export default function Prof() {
 return (
<>
  <Profile />
</>
);
}

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

我假设您使用的是 React Router Dom v6，因为您使用的是 Routes 而不是 Switch，在这种情况下，它应该是 element 而不是 component，这是您为该路由传递该组件的适当性.传递时也调用组件，如下所示：

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Sidebar from "./components/Sidebar";
import Dash from "./pages/Dash";
import Prof from "./pages/Prof";

function App() {
  return (
    <Router>
      <Sidebar />
      <Routes>
        <Route path="/" exact element={<Dash />} />
        <Route path="/profile" exact element={<Prof />} />
      </Routes>
    </Router>
  );
}
export default App;

【讨论】：

【解决方案2】：

这不是你使用 Routes 对象的方式。您必须使用 Routes > Route 作为声明。为了尝试基于 url 呈现组件，您必须使用 Outlets。

https://reactrouter.com/docs/en/v6/api#outlet

【讨论】：