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

Question

我第一次尝试使用路由并遵循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')
);

我收到以下错误：

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

我哪里出错了？

Answer 1

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

React 路由器教程

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

Answer 2

版本 5 和 6 之间有相当大的变化react-router-dom。看来 Udemy 课程/教程正在使用版本 5，您所需要的只是Router提供路由上下文，并且Route只需要在此上下文中呈现组件。然而，在版本 6 中，Route组件现在需要在Routes组件内呈现（这是 v5组件的升级Switch）。

介绍Routes

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

错误消息非常清楚，将您的Route组件包装在Routes组件中。这些路由也不接受子级（除了Route嵌套路由情况下的其他组件），它们将组件渲染为新 prop 上的JSXelement。

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

Answer 3

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

可能是5.1或更高。

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

npm install react-router-dom@5.3.0

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

Answer 4

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;

Answer 5

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

在此输入图像描述

Answer 6

我认为有很多问题可能导致这个问题。

1. React-router-dom版本 6 不再支持直接使用组件。使用元素来指定您路由的组件。

2. 路线必须是路线的子级

使用简单的片段。

import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import Homescreen from './screens/Homescreen';


function App() {
  return (
    <div className="App">
      <Navbar/>
      <BrowserRouter>      
        <Routes>
          <Route path='/home' element={<Homescreen/>} />
        </Routes>
    
      </BrowserRouter>
     
    </div>
  );
}

export default App;

Answer 7

尝试通过以下方式包装您的路线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;

Answer 8

这里的问题是你正在使用 React v5。自 React v6 以来，Router 中包含了一些更改。

因此，现在，要使其正常工作，正如错误消息所示，您需要将 Route 元素包装在 Routes 元素中（Routes 现在是等效的，但是是 Switch 元素的改进版本）。另外，您需要添加一个接受JSX 的“element”属性，而不是包装在 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>