错误“错误：<Route> 只能用作 <Routes> 元素的子元素”

Posted 2023-02-22

【中文标题】错误“错误：<Route> 只能用作 <Routes> 元素的子元素”

【英文标题】：Error "Error: A <Route> is only ever to be used as the child of <Routes> element"

【发布时间】：2021-12-18 07:10:23

【问题描述】：

我是第一次尝试使用路由，并按照Udemy 的确切说明进行操作：

文件App.js：

import  Route  from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";

function App() 
    return (
        <div>
            <Route path = "/welcome">
                <Welcome />
            </Route>
            <Route path = "/game">
                <Game />
            </Route>
            <Route path = "/leaderboard">
                <Leaderboard />
            </Route>
        </div>
    );


export default App;

文件 index.js

import ReactDOM from 'react-dom';
import  BrowserRouter  from 'react-router-dom';
import App from "./App";

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

我收到以下错误：

错误：路由只能用作 元素，从不直接渲染。请将您的路线包装在路线中。

我哪里出错了？

【参考方案1】：

是的，在 react-router-dom 版本 6 中它有点不同。请看下面的示例。

React Router tutorial

import  render  from "react-dom";
import 
  BrowserRouter,
  Routes,
  Route
 from "react-router-dom";
import App from "./App";
import Expenses from "./routes/expenses";
import Invoices from "./routes/invoices";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element=<App /> />
      <Route path="expenses" element=<Expenses /> />
      <Route path="invoices" element=<Invoices /> />
    </Routes>
  </BrowserRouter>,
  rootElement
);

【参考方案2】：

react-router-dom 的第 5 版和第 6 版之间发生了相当大的变化。似乎 Udemy 课程/教程使用的是版本 5，您只需要一个 Router 来提供路由上下文，而 Route 组件只需要在此上下文中呈现。然而，在第 6 版中，Route 组件现在需要在 Routes 组件中呈现（这是对 v5 Switch 组件的升级）。

Introducing Routes

v6 中最令人兴奋的变化之一是强大的新<Routes> 元素。这是从 v5 的<Switch> 的一个相当重要的升级 具有一些重要新功能的元素，包括相对路由 和链接、自动路线排名以及嵌套路线和布局。

错误信息非常清楚，将您的Route 组件包装在Routes 组件中。路由也不带孩子，它们在新的 element 属性上将组件渲染为 JSX。

function App() 
  return (
    <div>
      <Routes>
        <Route path="/welcome" element=<Welcome /> />
        <Route path="/game" element=<Game /> />
        <Route path="/leaderboard" element=<Leaderboard /> />
      </Routes>
    </div>
  );

【参考方案3】：

问题是你的 react-router-dom 版本。

可能是 5.1 或更高版本。

您可以尝试（在终端中）：

npm install react-router-dom@5.3.0

然后你的代码就OK了。或者你最好根据新的 react-router-dom 重建你的代码。

【参考方案4】：

尝试通过Routes 包装您的路线：

import  Route, Routes  from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";

function App() 
    return (
        <div>
          <Routes>
            <Route path = "/welcome">
                <Welcome />
            </Route>
            <Route path = "/game">
                <Game />
            </Route>
            <Route path = "/leaderboard">
                <Leaderboard />
            </Route>
           </Routes>
        </div>
    );


export default App;

【讨论】：

您还必须添加浏览器路由器

@BilalYaqoob 因为他已经在 index.js 中通过 Browser router 包装了 ，所以不需要在 app.js 中添加 Browser router

【参考方案5】：

这里的问题是您使用的是 React v5。从 Reacty v6 开始，Router 中包含了一些更改。 所以现在，为了让它工作，正如你的错误消息所说，你需要将你的 Route 元素包装在一个 Routes 元素中（Routes 现在是 Switch 元素的等效但改进版本）。此外，您需要添加一个接受 JSX 而不是包装在 Route 元素内的“元素”道具。 因此，要使其正常工作，您需要像这样导入所有这些元素：

import  BrowserRouter as Router, Routes, Route  from 'react-router-dom';

话虽如此，您的代码应该如下所示：

    <Router>
        <Routes>
            <Route path="/" element=<Welcome/>>           
            </Route>
            <Route path="/" element=<Game />>         
            </Route>
            <Route path="/" element=<Leaderboard />>          
            </Route>
        </Routes>
    </Router>

【参考方案6】：

这可能是因为您使用的是 react-router-dom 6 或更高版本。 试试看：npm i react-router-dom@5.2.0 它应该可以工作。

【参考方案7】：

在最新版本的 React 中，“Switch”被替换为“Routes”，“component”被替换为“element”

Enter image description here

【参考方案8】：

使用 element 选项来设置你的组件，而不是将它嵌套到路由标签中。然后用<Routes></Routes>包装所有路由。

不要忘记将路由添加到您的导入中

import  Route, Routes  from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";

function App() 
    return (
        <div>
            <Routes>
              <Route path = "/welcome" element=<Welcome />/>
              <Route path = "/game" element=<Game />/>
              <Route path = "/leaderboard" element=<Leaderboard />/>
            </Routes>          
        </div>
    );


export default App;

【参考方案9】：

还有另一种解决版本问题的方法：

App.js 文件：

import  BrowserRouter, Route, Routes  from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";

function App() 
  return (<div>
  <BrowserRouter>
    <Routes>
            <Route path = "/Welcome" element=< Welcome/>/>
            <Route path = "/Game" element=< Game/>/>
            <Route path = "/LeaderBoard" element=< LeaderBoard/>/>
           </Routes>
  </BrowserRouter>
    </div>
  );


export default App;

Index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
  

【讨论】：

解释一下。例如，想法/要点是什么？你能描述解决版本问题的方法吗？你改变了什么？你为什么改变它？来自the Help Center：“...总是解释为什么你提出的解决方案是合适的以及它是如何工作的”。请通过editing (changing) your answer 回复，而不是在 cmets 中（without "Edit:"、"Update:" 或类似的 - 答案应该看起来像是今天写的)。

【参考方案10】：

在较新版本的react-router-dom 中，我们需要将Route 嵌套在Routes 中。此外，component 和 exact 已在较新版本中被删除。

【参考方案11】：

用途：

<div>
  <Header />
</div>
<Routes>
  <Route path="/" element=<Home /> />
  <Route path="/profile" element=<Profile /> />
  <Route path="/about" element=<About /> />
</Routes>

【讨论】：

尝试用 Routes 包装你的路由：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

解释一下。例如，想法/要点是什么？来自the Help Center：“...总是解释为什么你提出的解决方案是合适的以及它是如何工作的”。请通过editing (changing) your answer 回复，而不是在 cmets 中（without "Edit:"、"Update:" 或类似的 - 答案应该看起来好像是今天写的)。

【参考方案12】：

import React from 'react'
import BrowserRouter, Route, Routes  from 'react-router-dom'
import './App.css';


import Navbar from './components/Navbar';
import  Home  from './components/screens/Home';
import  Login  from './components/screens/Login';
import  Profile  from './components/screens/Profile';
import  Signup  from './components/screens/Signup';

function App() 
  return (
    <BrowserRouter>
    <Navbar />
    <Routes>
        <Route path="/" element=<Home /> />
        <Route path="/login" element=<Login /> />
        <Route path="/signup" element=<Signup /> />
        <Route path="/profile" element=<Profile /> />\
    </Routes>




    </BrowserRouter>


  );


export default App;

【讨论】：

你可以详细说明，让你的答案更丰富。你可以解释你设计的问题，你的代码如何解决这些问题，并突出显示使它起作用的更改。

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