位置“/”处的匹配叶路由没有元素

Question

位置“/”处的匹配叶路由没有元素。这意味着默认情况下它将呈现空值，从而导致“空”页面

//App.js File

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
// import ReactDOM from "react-dom";


const App = () => {
  return (

    <Router >
      <Routes>

        <Route path="/" component={ Home }></Route>
      </Routes>
    </Router>


  )
}

export default App;

我的任何与路由器相关的代码都不起作用，我不知道为什么当我开始在程序中插入一些路由时会发生这种情况，因此它显示此错误

Answer 1

在V6中，你不能component再使用该道具了。它被替换为element：

<Route path="/" element={<Home />}></Route>

迁移文档中的更多信息。

Answer 2

我有同样的问题。用元素替换组件并且它起作用了。

替换这个：

<Route path="/" component={HomePage} exact />

有了这个：

<Route path="/" element={<HomePage/>} exact />

Answer 3

我遇到了同样的错误，但我的修复方法略有不同，我把元素拼写错误了。

<Route exact path='/MyGames' element={<MyGames/>}/>

这是它在浏览器控制台中给我的错误

Matched leaf route at location "/MyGames" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

Answer 4

很简单的：

1. 使用element而不是component
2. 像这样包装你的组件：{<Home/>}而不是{Home}

<Route path="/" component={ <Home/> } />

Answer 5

在版本 6 中：

组件替换为element并需要关闭"</Route>"

 <Route exact path="/" element={<AddTutorial />}></Route>

https://reactrouter.com/docs/en/v6/getting-started/overview