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

【问题标题】：Matched leaf route at location "/" does not have an element位置“/”的匹配叶路由没有元素
【发布时间】：2021-12-19 13:17:44
【问题描述】：

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

//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;

**我的任何反应路由器相关代码都不起作用我不知道为什么当我开始在程序中插入一些路由时会发生它所以它显示这个错误**

【问题讨论】：

标签： javascript node.js reactjs react-router

【解决方案1】：

在 V6 中，您不能再使用 component 属性。它被替换为element：

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

更多信息请关注migration doc。

【讨论】：

谢谢兄弟我花了两天时间解决这个错误我从心底里感谢你。
@user16102215 不要忘记接受答案。

【解决方案2】：

我有同样的错误，但我的修复略有不同我拼错了元素。

<Route exact path='/MyGames' elemtent={<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.

【讨论】：

你说得对，在当前版本组件不起作用，我使用元素并为我工作

【解决方案3】：

在 V6 中，您不能再使用 component 属性了。它必须替换为 element

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

 function App() {

  return 
  <div className="App">
   <Router>
    <Routes>
     <Route path="/" element={<Home />}></Route>
    </Routes>
   </Router>
  </div>;
 }

 export default App;

【讨论】：

【解决方案4】：

在版本 6 中：

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

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

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

【讨论】：

【解决方案5】：

首先请从package.json 文件中检查您的react-router-dom 版本。如果它高于版本6，您应该这样做。

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

 function App() {

  return (
  <div className="App">
   <Router>
    <Routes>
     <Route path="/" element={<Home />}></Route>
    </Routes>
   </Router>
  </div>
 );
 }

 export default App;

【讨论】：

【解决方案6】：

很简单：

使用元素代替组件
像这样包装您的组件：{} 而不是 {Home}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案7】：

我遇到了同样的问题。用元素替换组件，它就起作用了。

替换这个：

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

用这个：

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

【讨论】：

替换这个：空的？