在 ReactJS 中基于来自 API 的 slug 动态创建页面

Question

我一直在了解 React Router 运行在我尝试根据从 fetch api 调用中收到的 slug 实现动态页面创建时遇到一些问题。

基本上，我试图在用户点击 link 后将他们重定向到一个新页面 - 这个新页面将是一个新组件，我将进行新的 api 调用这个组件以 slug 作为我的搜索参数。

但是我很难根据 slug 动态更改页面。

这是我在其中进行初始获取和显示数据的组件 (BoxScore.js) -

import React from "react";
import { useEffect, useState } from "react";

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

const BoxScore = () => {
  const [users, setUsers] = useState([]);
  const [pageNumber, setPageNumber] = useState(1);



  useEffect(() => {
    fetch(
      `myfetchapihere.com`
    )
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setUsers(data);
        console.log(data);
        setPageNumber(pageNumber);
      });
  }, [pageNumber]);
     return (
         <> {users.map((user) => (
                <div
                  className="column"
                  key={user.id}
                  id={user.id}>
                  <div className="inner">
                    <div className="flex">
                      <h2 className="uk-text-small">
                     
         

 <Link to={user.slug} className="h2 link" id={user.slug}>
    {user.name}
    </Link>
    </div>

    </div></div>
        )}
</>);

在我的 App.js 中，我设置了 React 路由器 -

 <Routes>
      <Route path="boxscore/:slug" element={<BoxScore />}>
      <Route path=":slug" element={<OneScore />} />
    </Route>

   </Routes>

我在 Boxscore 组件中设置的 link 单击时未呈现我的 OneScore 组件 -

import React from 'react'
import BoxScore from './Boxscore'
import { useParams } from "react-router";
import {useEffect} from 'react'

function OneScore() {

    const { slug } = useParams();
    
  useEffect(() => {
    // Fetch post using the postSlug
    console.log({slug});
  }, [slug]);

  return (
    <div>
          Hiii
    </div>
  )
}

export default OneScore

编辑 - 由于@DrewReese 的评论，我已经设法使 linking 工作但是，现在唯一的问题是 url 更改为（ex- www.a.com/boxscore/) 'OneScore' 组件未呈现，而是相同的 BoxScore 保持不变，只是 url 已更改。

Answer 1

查看 useParams 以从 url 获取 slug。 https://v5.reactrouter.com/web/api/Hooks/useparams

Answer 2

使用 Link or NavLink 组件代替原始锚点 (<a />) 标签。这些 link 组件与路由器提供的路由上下文一起工作。使用锚标记将重新加载应用程序，这很可能不是您想要发生的事情。

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

...

{users.map((user) => (
  <div
    className="column"
    key={user.id}
    id={user.id}
  >
    <div className="inner">
      <div className="flex">
        <Link to={user.slug} className="h2link" id={user.slug}>
          <h2 className="uk-text-small">{user.name}</h2>
        </Link>
      </div>
    </div>
  </div>
)};

路由组件应使用 useParams 挂钩访问路由的 slug 路径参数，并使用 useEffect 挂钩重新运行任何依赖于此 slug 值的逻辑。

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

...

const { slug } = useParams();

useEffect(() => {
  // "make a new api call on this component with the slug as my search parameter"
}, [slug]);

在 ReactJS 中基于来自 API 的 slug 动态创建页面

Dynamically create pages based on slug from API in ReactJS

javascript

reactjs

react-router