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

Question

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

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

Wallet.js

import React from "react";

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

Home.js

import React from "react";

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

所以当我访问 http://localhost:3001/ 或 http://localhost:3001/wallet 时，我收到空白页面。谁能指出我哪里出错了？

Answer 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>

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

Why I receive blank page? React

javascript

reactjs

react-router