使用react router获取警告msg: router.ts:11无路由匹配位置"/charterdetails“的页面出现问题

Question

我是新的反应，我试图建立申请，以便为我正在进行的一个学校项目的钓鱼租赁预订。我使用的是大部分工作的，但是当我尝试使用一个按钮导航到页面时，它不会在其中的两个页面上呈现组件。页面将刷新，但它不会呈现组件"CharterDetails“或"BookCharter”。

我没有错误，但我确实收到一个警告，上面写着：

没有匹配位置的路线"/charterdetails/62fb097cb985e11cb3884f6e“

如果我使用按钮处理程序或者只是一个链接，这似乎并不重要，这两个选项为CharterDetails和BookCharter都提供了相同的结果，其他页面的导航与预期一样。

点击这里获取我的GitHub存储库选择正在工作的分支。

希望我能解释得够清楚。谢谢你抽出时间

App.js

import React, { useState, useEffect } from "react";
import Nav from "./Components/Nav";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  useParams,
} from "react-router-dom";
import Login from "./Components/Users/LoginForm";
import "./App.css";
import Landings from "./Pages/Landings.js";
import Boats from "./Pages/Boats";
import Charters from "./Pages/Charters";
import CharterDetails from "./Pages/CharterDetails";
import BookCharter from "./Pages/BookCharter";
import PageNotFound from "./Pages/404";
import Home from "./Pages/Home";

function App() {
  const { id } = useParams();
  console.log("useParams", id);
  return (
    <>
      <header>
        <img
          src="../assets/Images/scsfcBadge.png"
          alt="SoCal Sportfishing Club"
        />
        SoCal Sportfishing Club
      </header>
      <div className="main">
        <Router>
          <aside className="left">
            <Nav />
          </aside>
          <main>
            <Routes>
              <Route index element={<Home />} />
              <Route path="/charters" element={<Charters />} />
              <Route path="/landings" element={<Landings />} />
              <Route path="/boats" element={<Boats />} />
              {/* need to add parameter :id to link */}
              <Route page="/bookcharter/" element={<BookCharter />} />
              {/* need to add parameter :id to link */}
              <Route page="/charterdetails/:id" element={<CharterDetails />} />
              <Route page="*" element={<PageNotFound />} />
            </Routes>
          </main>
          <aside className="right">
            <Login />
          </aside>
        </Router>
      </div>
      <footer>Copyright © 2022 SoCal SportFishing Club </footer>
    </>
  );
}

export default App;

Home.js

import React,{useState , useEffect} from 'react';
import { Link, useNavigate } from "react-router-dom";
import { BrowserRouter as Router,  Route, Routes, useParams } from "react-router-dom";

function Home(){

        const navigate = useNavigate();
        const [charterData, setCharterData] = useState([]);
        const [charterid, setCharterid] = useState('');
        useEffect(() => {
            // declare the async data fetching function
            const fetchData = async () => {
                fetch('http://localhost:5000/charter/featured/')
                .then((response) => response.json())
                .then((data) => setCharterData(data)); 
                console.log('Charter ', charterData)   
            }
          
            // call the function
            fetchData()
              // make sure to catch any error
              .catch(console.error);
          }, [])

          function handleClick(charter) {
            let id = charter.id;
            let path = `/charterdetails//${id}`
            navigate(path);
          }

          function BookClick(e) {
           // e.preventDefault();
            let path = `/bookcharter/${e.target.id}`
            navigate(path);
          }

    return(
        
            <div className="container">
            {
                    charterData.map((charter, index) => {
                      return(<div key={index} className="card">
                       <div className="card-header">
                      </div>
                           <img src={'../assets/Images/charters/' + charter.Img} alt={charter.CharterName} />
                            <div className="tag tag-teal">{charter.BoatName}&nbsp;&nbsp;-&nbsp;&nbsp;{charter.Duration}</div>
                               <div className="card-body">
                                  <div style={{fontSize:'28px', fontWeight: 'Bold'}}>
                                  {charter.CharterName}
                                  </div>
                                   <p style={{fontSize:'16px'}}>Departure date: {new Date(charter.Departure).toDateString()}<br />
                                   Return date: {new Date(charter.Return).toDateString()}<br />
                                   Trip Duration: {charter.Duration}<br />
                                   Price: ${charter.Cost}<br />
                                   Max Load:{charter.MaxLoad}<br />
                                   Target: {charter.Target}<br /></p>
                                   <div style={{textAlign:'center', width: '100%'}}>
                                    <Link
                                    to= {{
                                        pathname:`/charterdetails/${charter.id}`
                                    }}
                                    >
                                       <button>Details</button> 
                                    </Link>                                  
                                    <button onClick={BookClick}>Book</button>
                                </div>
                               </div>
                           </div>)
                  })
            }
        </div>
    )
}

export default Home;

Nav.js

import React from 'react';
import { Link } from "react-router-dom";

export default function Nav() {
    return (
    <>
    <ul>
      <li>
        <Link to="/">Home</Link>&nbsp;&nbsp;
      </li>
      <li>
        <Link to="/landings">Landings</Link>&nbsp;&nbsp;
      </li>
      <li>
        <Link to="/boats">Boats</Link>&nbsp;&nbsp;
      </li>
      <li>
        <Link to="/charters">Club Charters</Link>&nbsp;&nbsp;
      </li>
      <li>
        <Link to="/charterdetails">Charter Details</Link>&nbsp;&nbsp;
      </li>
      <li>
        <Link to="/bookcharter">Book Charter</Link>&nbsp;&nbsp;
      </li>
    </ul>
    </>
    );
  }

CharterDetails.js

import React from 'react';

function CharterDetails(){
    return(
        <div>
            Charter Details
        </div>
    )
}

export default CharterDetails;

BookCharter.js

import React from "react";

function BookCharter(){
    return(
       <>
        Book Charter
       </>
    )
}

export default BookCharter;

Answer 1

在app.js中，我有页面而不是路径。

变身

<Route page="/bookcharter" element={<BookCharter />} />
<Route page="/charterdetails/:id" element={<CharterDetails />} />

至

  <Route exact path="/bookcharter" element={<BookCharter />} />
  <Route exact path="/charterdetails/:id" element={<CharterDetails />} />