我尝试使用带动态值的嵌套路由。在App.js中的普通路由有效,但在QouteDetail中的嵌套路由没有显示任何内容。控制台显示“NO ROUTES MATCHED LOCATION”。有人可以告诉我问题出在哪里吗。
代码:
import React from 'react';
import {Route , Routes } from "react-router-dom";
import AllQuotes from './components/AllQuotes';
import NewQuote from './components/NewQuote';
import QuoteDetail from './components/QuoteDetail';
function App() {
return (
<div>
<Routes>
<Route path="/" element={<AllQuotes/>} />
<Route path="/quotes" element={<AllQuotes/>} />
<Route path="/new-quotes" element={<NewQuote/>} />
<Route exact path="/quotes/:quoteID" element={<QuoteDetail/> } />
</Routes>
</div>
);
}
export default App;
import React from 'react';
import { Route, Routes , useParams } from 'react-router-dom';
import Comments from './comments/Comments';
function QuoteDetail(props) {
const params = useParams();
return (
<div>
<h1>QUOTE DETAILS</h1>
<h2>{params.quoteID}</h2>
<Routes>
<Route exact path={`/quotes/${params.quoteID}/comments`} element= {<Comments/>} />
</Routes>
</div>
);
}
export default QuoteDetail;