在react-router中useParams()为空

Question

我正在尝试将 url 中的参数渲染为网站中的 h2 。但即使当我尝试 console.log useParams 也是空的。

这是我的 Router.js 文件

const Webpages = () => {
    return (
        <Router>
            <Routes>
                <Route exact path="/" element={Home()} />
                <Route exact path="/comics" element={Comics()} />
                <Route path='/comics/:comicId' element={Comic()} />  <--------------
                <Route exact path="/portfolio" element={Portfolio()} />
                <Route exact path="/blog" element={Blog()} />
                <Route exact path="/contact" element={Contact()} />
                <Route exact path="/store" element={Store()} />
                <Route path="*" element={NotFound()} />
            </Routes>
        </Router>
    );
};

export default Webpages;

这是我的漫画组件

import React from 'react';
import NavBar from '../../components/NavBar';
import { useParams } from 'react-router-dom';

function Comic() {
    let { comicId } = useParams();
    console.log(comicId);

    return (
        <div>
            <NavBar />
            <p>{comicId}</p>
        </div>
    )
}

export default Comic

当我转到随机漫画时，页面元素工作正常，例如localhost:3000/comics/465456但

标签为空，控制台日志未定义，如果我只是尝试控制台日志 useParams() ，它也是未定义的

Answer 1

您直接调用 React 函数。直接调用 React 函数并不是React的工作方式。

该Route组件的elementprop 需要一个React.ReactNode，又名 JSX。将组件作为 JSX 传递。JSX 被转换为普通的 Javascript，React 框架在 React 组件生命周期的范围内处理调用您的函数。

例子：

const Webpages = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/comics" element={<Comics />} />
        <Route path='/comics/:comicId' element={<Comic />} />
        <Route path="/portfolio" element={<Portfolio />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/store" element={<Store />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};