错误“错误：A<route> 只能被用作<routes>元素”</routes></route>

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 中它有点不同。 请看下面的示例。

反应路由器教程

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

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

介绍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>
  );
}

Answer 3

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

可能是5.1或更高。

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

npm install react-router-dom@5.3.0

然后你的代码就可以了。 或者你最好根据新的 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

尝试通过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 6

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

在此处输入图像描述

Answer 7

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

1. react-router-dom 版本 6 不再支持直接使用组件，使用一个元素来指定你路由的组件。

2. Route 必须是 Routes 的子节点

使用简单的代码片段

 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 8

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

Answer 9

这里的问题是您使用的是 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>

Answer 10

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

Answer 11

我遇到了同样的错误，所以我去添加了路由，如下所示：

import React from "react";
import { connect } from 'react-redux';
import {Routes, Route} from "react-router-dom"
import TripForm from "../componenets/TripForm";
import Trips from "../componenets/Trips"
import { fetchTrips } from "../actions/fetchTrips";


class TripsContainer extends React.Component {

    componentDidMount() {
        this.props.fetchTrips()
    }

    render() {
        return (
            <div>
            <Routes >
                <Route path="/trips/new"  />
                <TripForm /> <br/><br/>
                <Trips trips={this.props.trips} />
            </Routes>
            </div>
        )
    }
}

但我现在遇到了一个我无法弄清楚的新错误：

错误：[未定义] 不是组件。 的所有子组件必须是 a 或 <React.Fragment>

有人知道怎么修这个东西吗？

Answer 12

现在，React 使用“React Router Version 6”。

对于React Router Version 6 ，您的“index.js”是正确的：

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

但是你的“App.js”对于React Router 版本 6是不正确的，所以下面是正确的：

*我更改了 3 个部分，如下图所示

应用程序.js ：

  // 1. "Routes" is imported
import { Routes, Route } from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";

function App() {
    return (
        <div> // 2. With "<Routes></Routes>", surround "3 <Route /> tags" 
            <Routes> // 3. Put an element with a component to each "<Route />" 
                <Route path = "/welcome" element={<Welcome />} />
                <Route path = "/game" element={<Game />} />
                <Route path = "/leaderboard" element={<Leaderboard />} />
            </Routes>
        </div>
    );
}

export default App;

Answer 13

我无法从 react-router-dom 导入 Routes 或 Switch：

尝试导入错误：“开关”未从“react-router-dom”导出。

但是我正常安装了react-router-dom。 任何线索？

Answer 14

利用：

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

Answer 15

使用 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;

Answer 16

即使我遇到了同样的问题，但我找到了解决方案。 我们需要阅读最新的文件。 开关已更改为路线。 旧版本的组件已替换为元素。 我们需要将其包含在导入语句中。

如果您观察最新的文档，

Answer 17

我面临同样的问题并解决了它。 虽然我正在使用

react-router-dom@6

所以我不得不修改app.js和index.js ，如下所示。

在index.js中

import { BrowserRouter } from "react-router-dom";

<React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
</React.StrictMode>

和app.js

import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <>
      <Header />
        <main className="py-3">
          <Container>
            <Routes>
              <Route path="/" element={<HomeScreen />} exact/>
            </Routes>
          </Container>
        </main>
      <Footer />
    </>
  );
}

export default App;

根据官方文档。

Answer 18

我知道我迟到了，但还有另一种方法可以直接从 javascript 进行嵌套路由。

首次进口

import { useRoutes } from "react-router-dom";

其次，声明你的路线。 这是一个简单的例子

function App() {

return useRoutes([
{
  path: "/",
  element: <Example/>
},
{
  path: "/contact",
  element: <Example/>
}]);

}

所以现在你可以用这种方式拥有无限的嵌套组件。

Answer 19

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

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;

索引.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')
);