我的函式App()中的“BrowserRouter”、“Routes”和“Route”的結構有什么問題？-有解無憂

我正在嘗試在學習 React.JS 時遵循教程，但我遇到了一個問題，因為該教程使用的是舊版本的 React，我一直在試圖弄清楚如何使用BrowserRouter、Routes和Route。

任何人都可以幫助我嘗試重新構建代碼以使其適用于更新版本的 React 嗎？我嘗試通讀檔案并嘗試混合使用一些解決方案但沒有成功。任何幫助深表感謝！

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import "bootstrap/dist/css/bootstrap.min.css";

import Navbar from "./components/navbar.component.js";
import PortfolioList from "./components/portfolio-list.component";
import EditPortfolio from "./components/edit-portfolio.component";
import CreatePortfolio from "./components/create-portfolio.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <Routes>
      <Navbar />
      <br/>
      <Route path="/" exact component={PortfolioList} />
      <Route path="/edit/:id" exact component={EditPortfolio} />
      <Route path="/create" exact component={CreatePortfolio} />
      <Route path="/user" exact component={CreateUser} />
    </Routes>
  );
}

export default App;

以下是我在運行時生成的“錯誤”：

錯誤：[Navbar] 不是“路線”組件。'Routes' 的所有子組件必須是 'Route' 或 'React.Fragment'

uj5u.com熱心網友回復：

導航欄不是路線，因此無需將其保留在那里。

function App() {
  return (
  <div>
    <Navbar />
    <br/>
    <Routes>
      <Route path="/" exact component={PortfolioList} />
      <Route path="/edit/:id" exact component={EditPortfolio} />
      <Route path="/create" exact component={CreatePortfolio} />
      <Route path="/user" exact component={CreateUser} />
    </Routes>
  </div>
  );
}

uj5u.com熱心網友回復：

只有Route組件和React.Fragments 可以是組件的子Routes組件，反之亦然。將非Route組件移出Routes. 該Route組件API版本6中也發生了變化，不再有render和component道具，路由組件傳遞給element道具如JSX，現在路由總是完全匹配，因此這不再是exact道具也是如此。

function App() {
  return (
    <>
      <Navbar />
      <br/>
      <Routes>
        <Route path="/" element={<PortfolioList />} />
        <Route path="/edit/:id" element={<EditPortfolio />} />
        <Route path="/create" element={<CreatePortfolio />} />
        <Route path="/user" element={<CreateUser />} />
      </Routes>
    </>
  );
}

uj5u.com熱心網友回復：

您可以使用“BrowserRouter”標簽后跟“Switch”標簽，然后您現在可以使用“Route”標簽來指定每個組件的路徑

uj5u.com熱心網友回復：

您可以使用“BrowserRouter”標簽后跟“Switch”標簽，然后您現在可以使用“Route”標簽來指定每個組件的路徑。

    return (
        <>
            <BrowserRouter>
                <Switch>
                    <Route path="/" exact component={DashBoard} />
                    <Route path="/specialistes" exact component={Specialistes} />
                    <Route path="/findgarages" exact component={FindGarage} />
                    <Route path="/garages" exact component={Garages} />
                </Switch>
            </BrowserRouter>
        </>
    )````

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/361730.html

標籤：javascript 反应反应路由器-dom

上一篇：使用document.querySelector()觸發事件click()不起作用，但從控制臺觸發CSS事件click()作業正常

下一篇：JQueryToggleClass1每次點擊切換