React-Router的URL参数

Question

//文章页面

const ArticlePage = ({ match }) => {
    const name = match.params.name;
    return (
    <>
        <h1>
            This is {name} Article
        </h1>
    </>
);
    }
export default ArticlePage;

//应用

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import NavBar from "./NavBar";
import NotFound from "./pages/NotFound";
import ArticlePage from "./pages/ArticlePage";

function App () {
  return (
    <div className="App">
      <BrowserRouter>
        <NavBar />
        <Routes> 
          <Route exact path='/' element ={<HomePage />} />
          <Route path = '/topic' element = {<Topic />} />
          <Route path = '/about' element = {<AboutPage />} />
          <Route path = '/article/:name' element = {<ArticlePage />} /> 
          <Route path = '*' element = {<NotFound />} />
        </Routes>
      </BrowserRouter>
    </div>
   );
}

export default App;

//导航栏页面

import { Link } from 'react-router-dom';
import './NavBar.css';

const NavBar = () => (
    <nav>
        <ul>
            <li className='li'>
                <Link to ="/" className='link' > Home </Link>
            </li>
            <li className='li'>
                <Link to ="/about" className='link' > About </Link>
            </li>
            <li className='li'>
                <Link to = "/article" className='link'> Article </Link>
            </li>
            <li className='li'>
                <Link to = "/topic" className='link' > Topic </Link> 
            </li>
        </ul>
    </nav>
);

export default NavBar;

**我试图使用变量“name”传递URL参数，但当我访问ArticlePage时，我得到404:Not Found（我的NotFound页面的内容）。我试图使用ArticlePage中的props（match）获取“name”变量的值，但无法呈现它。反应相当新，任何提示或解决方案都将不胜感激。我正在使用React v6**

Answer 1

试试这个代码，它很管用

import { useParams } from 'react-router-dom';

const ArticlePage = () => {
   const params = useParams();
  return (
    <>
      <h1>
        This is {params.name} Article
      </h1>
    </>
  );
}
export default ArticlePage;