我的反應組件沒有使用路由顯示

Question

我有一個正在處理的個人項目，但遇到了一些問題。 我有兩個簡單的代碼片段，一個用於組件，一個用於處理路由。

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

function setPath {
  return (
    <Routes>
      <Route path="/sect/guest" element={<MobileCardsGuest />} />
    <Routes/>
  )
} 

零件

import React from "react";
import eventIcon from "../../assets/img/red-carpet.png";
import mealIcon from "../../assets/img/hamburger.png";
import accIcon from "../../assets/img/accomodation.png";
import "../../assets/css/mobilecards.css";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";

function MobileCardsGuest() {
  const notify = ()=>{
    return toast.info("Coming Soon")
  }
  
  return (
    <div className="mobile-card">
      <p className="text-center mob-title">
        <b style={{ color: "var(--pieme-color)" }}>You are Welcome!</b>
      </p>
      <p className="text-center mob-body">Please choose what you would like</p>
      <div class="card bg-light m-card">
     
        
        <p></p>
          <img src={mealIcon} className="iconimg" alt="Meal Icon" />
          <div class="card-body text-center">
            <p class="card-text">Meal</p>
          </div>
                  </div>

      <div class="card bg-light m-card">
       
       
        <p></p>
          <img src={accIcon} className="iconimg" alt="Acc Icon" />
          <div class="card-body text-center">
            <p class="card-text">Accomodation</p>
          </div>
        </Link>
     

      <div class="card bg-light m-card" onClick={notify}>
        <p></p>
        <img src={eventIcon} className="iconimg" alt="Event Icon" />
        <div class="card-body text-center">
          <p class="card-text">Event</p>
        </div>
      </div>
    </div>
  );
}

export default MobileCardsGuest;

當我將上述內容和 go 運行到路徑"/sect/guest"時，它不會顯示該組件。

Answer 1

您還需要導入 BrowserRouter。

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import MobileCardsGuest from './path/MobileCardsGuest';

const SetPath = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path='/sect/guest' element={<MobileCardsGuest />} />
      </Routes>
      ... ...
    </BrowserRouter>
  );
}

export default SetPath;

Answer 2

如果您使用的是 react 18 或最新的 react-router-dom，那么您的路由結構將如下所示：

<Router>
  <Routes>
   <Route path="/" element={<Home />} />
   <Route path="/cart" element={<Cart />} />
  </Routes>
<Router>

此處 BrowserRouter 和 switch 不會在較新版本的應用程序中使用。