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

Posted 2023-02-21

【中文标题】位置“/”的匹配叶路由没有元素

【英文标题】：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;

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

【参考方案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 />

【讨论】：

替换这个：空的？