为什么我收到空白页？反应答案

【问题标题】：Why I receive blank page? React为什么我收到空白页？反应
【发布时间】：2022-04-14 07:54:25
【问题描述】：

我已经学习 React 几天了，我写了一个简单的项目（单页应用程序）。问题是我的页面没有显示任何内容——它是一个空白页面。

应用程序.js

import './App.css';
import {BrowserRouter as Router,Routes,Route,} from "react-router-dom";
import { Home } from './components/Home';
import { Wallet } from './components/Wallet';


function App() {
  return (
      <Router>
        <Routes>
          <Route exact path="/" component={Home}/>
          <Route path="/wallet" component={Wallet}/>
        </Routes>
      </Router>
  );
}

export default App;

钱包.js

import React from "react";

export function Wallet() {
  return (
    <div>
      <h1>Wallet Page!</h1>
    </div>
  );
}

首页.js

import React from "react";

export function Home() {
  return (
    <div>
      <h1>Home Page!</h1>
    </div>
  );
}

因此，当我转到 http://localhost:3001/ 或 http://localhost:3001/wallet 时，我收到空白页面。有人可以指出我在哪里犯了错误吗？

【问题讨论】：

您应该提供有关该项目的更多详细信息。你是如何生成项目的
在 Home.js 中，您已将函数命名为 Wallet，但我认为它应该是 Home。
空白页 === 检查浏览器控制台是否有错误
我在复制代码时犯了错误，因为有一个 Home 函数。

标签： javascript reactjs react-router

【解决方案1】：

在 react-router-dom@6 中， Route 组件将 element 属性上的路由内容呈现为 ReactNode，即 JSX。不再有任何 component，或 render 和 children 功能道具。

Routes and Route

declare function Route(
  props: RouteProps
): React.ReactElement | null;

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactNode | null;
  index?: boolean;
  path?: string;
}

将组件移动到 element 属性中并将它们作为普通 JSX 传递，而不是作为对组件的引用。

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/wallet" element={<Wallet />} />
  </Routes>
</Router>

【讨论】：