堆棧內存溢出
  簡體   English   中英

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

[英]Error "Error: A <Route> is only ever to be used as the child of <Routes> element"

 原文  2021-11-03 23:06:48  8   16    javascript/ node.js/ reactjs/ frameworks/ react-router-dom

問題描述

我第一次嘗試使用路由並遵循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')
);

我收到以下錯誤：

錯誤：路由只能用作元素的子元素，從不直接渲染。 請將您的路線包裝在路線中。

我哪里出錯了？

16 個解決方案

解決方案1
 127  2021-11-04 09:38:29

是的，在 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
);

解決方案2
 29  2021-11-03 23:30:06

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

解決方案3
 13  2021-11-10 14:50:08

問題是您的 react-router-dom 版本。

可能是5.1或更高。

您可以嘗試（在終端中）：

npm install react-router-dom@5.3.0

然后你的代碼就可以了。 或者你最好根據新的 react-router-dom 重建你的代碼。

解決方案4
 7  2022-01-06 18:01:50

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;

解決方案5
 6  2021-11-03 23:12:47

嘗試通過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;

解決方案6
 6  2021-12-09 11:43:13

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

在此處輸入圖像描述

解決方案7
 5  2022-02-11 15:42:24

我認為有很多問題會導致這個問題。

  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;

解決方案8
 3  2021-12-01 13:10:14

這可能是因為您使用的是 react-router-dom 版本 6 或更高版本。 試試： npm i react-router-dom@5.2.0它應該可以工作。

解決方案9
 3  2021-12-24 16:20:01

這里的問題是您使用的是 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>

解決方案10
 2  2021-12-31 08:25:16

在較新版本的react-router-dom中，我們需要將Route嵌套在Routes中。 此外， component和exact已在較新版本中刪除。

解決方案11
 1  2021-12-04 20:36:48

我遇到了同樣的錯誤，所以我去添加了路由，如下所示：

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>

有人知道怎么修這個東西嗎？

解決方案12
 1  2022-02-05 17:42:42

現在，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;

解決方案13
 0  2021-11-04 09:32:54

我無法從 react-router-dom 導入 Routes 或 Switch：

嘗試導入錯誤：“開關”未從“react-router-dom”導出。

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

解決方案14
 0  2021-11-20 15:03:22

利用：

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

解決方案15
 0  2021-11-27 03:25:53

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

解決方案16
 0  2022-01-19 21:33:43

即使我遇到了同樣的問題，但我找到了解決方案。 我們需要閱讀最新的文件。 開關已更改為路線。 舊版本的組件已替換為元素。 我們需要將其包含在導入語句中。

如果您觀察最新的文檔，

解決方案17
 0  2022-08-17 01:57:08

我面臨同樣的問題並解決了它。 雖然我正在使用

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;

根據官方文檔。

解決方案18
 0  2022-08-31 22:29:39

我知道我遲到了，但還有另一種方法可以直接從 javascript 進行嵌套路由。

首次進口

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

其次，聲明你的路線。 這是一個簡單的例子

function App() {

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

}

所以現在你可以用這種方式擁有無限的嵌套組件。

解決方案19
 -1  2021-12-21 00:20:00

還有另一種解決版本問題的方法：

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 路由錯誤-A<route> 只能用作的孩子<routes>元素，從不直接渲染。 請把你的<route>在一個<routes></routes></route></routes></route> 路線只能用作的孩子<routes>元素，在 React 路由器 v6 中</routes> 反應路由器用作的孩子<Routes>元素錯誤 子路由中的routerLink錯誤 錯誤是：A<Router> 可能只有一個子元素 JavaScript For循環附加子元素僅附加第一個元素，然后引發錯誤 將兒童路線嵌套在另一條兒童路線內 Angular 2和SystemJS子路由訪問錯誤 子元素按類名錯誤 添加新路由時出錯，路由配置中需要路徑
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM