react-router-dom 运行不正常，屏幕变白

Question

我做的练习很少，但是当我在 react-router-dom v6 中将路由器加载到我的新“项目”时，屏幕变白了，就像我编译路由器错误一样。

import React from "react";
import ReactDom from "react-dom";
import {BrowserRouter, Route, Routes } from "react-router-dom";
import { about } from ".//views/about.js"

export default function App() {
  return (
    <BrowserRouter> 
      <Routes>
        <Route exact path="/about" element={<about />} />
        <Route path="/inicio" element={<home />} />
      </Routes>
    </BrowserRouter>
  );
}

这是我的about.js

import React from 'react'

export default function about() {
  return <div>Soy una pagina de practica</div>
}

在其他论坛上，我说使用<Switch>方法，但我使用react-router-dom v6，需要使用<Routes>。因此，如果有人能提供帮助，我将不胜感激，因为我尝试了所有方法，但似乎没有任何效果。

Answer 1

正确的 React 组件是大写的。

Rendering a Component

Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.

To learn more about the reasoning behind this convention, please read JSX In Depth.

About 组件也是默认导出的，因此它也需要默认导入（ 而不是命名为 exports/imports）。

import About from "./views/about.js";

export default function App() {
  return (
    <BrowserRouter> 
      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/inicio" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

...

export default function About() {
  return <div>Soy una pagina de practica</div>
}

react-router-dom 运行不正常，屏幕变白

The react-router-dom doesn ' t work well and the screen turns out white

reactjs

react-router-dom