我在 React 中的项目列表的动态路由

Question

我是 React 的新手，我有想要动态链接的项目的 JSON 数据。 我创建了一个名为“ProjectSingle”的组件来显示每个组件，但是我似乎无法显示数据。

const App = () => {

const [projects, setProjects] = useState([]);

const getProjects = () => {
  fetch('http://localhost:8000/projects')
  .then((res) =>{
    return res.json();
  })
  .then((data) => {
    setProjects(data);
  })
}

  useEffect(() => {
  getProjects();
  AOS.init({disable: 'mobile'});
  },[]);

  return (
    <Router>
    <div className="App">
      <Switch>
      {projects.map( project =>(
      <Route exact path='/project/:slug' render={props => (
        <ProjectSingle {...props} project={project}/>
      )}/>
    ))}
      </Switch>
      <Footer/>
    </div>
    </Router>
  );
}

export default App;

请求的 JSON 如下，我使用“slug”来生成 slug。

{
  "projects": [
    {
      "title": "Project One",
      "image": "/img/wp-logo.png",
      "slug": "project-one",
      "key": 1
  },
  {
    "title": "Project Two",
    "image": "/img/wp-logo.png",
    "slug": "project-two",
    "key": 2
},

}

虽然我不确定在我的单个组件中放什么数据来获取项目迭代的数据

const ProjectSingle = ({project}) => {

    const { slug } = useParams();

    return (
    <>
    <h1>{project.title}</h1>
    </>
    )
}

export default ProjectSingle;

Answer 1

首先，您只需要分配一个<Route path="/project/:slug" /> ... </Route> 。 :slug参数可用于动态确定此路由的内容。

<Route
   exact
   path="/project/:slug"
   render={(props) => <ProjectSingle {...props} projects={projects} />}
/>

const ProjectSingle = ({projects}) => {

    const { slug } = useParams();
    const project = projects.find(p => p.slug === slug)

    return (
    <>
    <h1>{project.title}</h1>
    </>
    )
}

export default ProjectSingle;

这条路线的孩子（ ProjectSingle ）然后将useParams()检索与关联的值:slug ，并用它来找到正确的project ，从projects渲染。

可能有一种更聪明的方法来使用路由的render()并在该阶段确定所需的 slug 和项目 - 使ProjectSingle成为一个没有任何路由知识的纯组件。

Answer 2

有几个重要步骤可以实现这一点。

1. 包括像 react-router、react-router-dom 这样的库
2. 创造历史
3. 使用历史渲染路线 4.Define Navigation to the routes

这是根据您的要求提供的示例： 注意：根据您的设计，路由将在同一页面中呈现。 我已将其更新为单个文件。 代码沙盒中的完整工作示例

 import React, { useState } from "react"; import { Router, Switch, Route, useParams } from "react-router"; import { Link } from "react-router-dom"; import createHistory from "history/createBrowserHistory"; import "./styles.css"; const history = createHistory(); const Footer = () => { return <div>Footer here.</div>; }; const ProjectSingle = ({ project }) => { const { slug } = useParams(); //TODO useEffect to get project details return ( <> <h1>Details of {slug} </h1> <div>{JSON.stringify(project)}</div> </> ); }; export default function App() { const [projects, setProjects] = useState([ { title: "Project One", image: "/img/wp-logo.png", slug: "project-one", key: 1 }, { title: "Project Two", image: "/img/wp-logo.png", slug: "project-two", key: 2 } ]); /*const getProjects = () => { fetch('http://localhost:8000/projects') .then((res) =>{ return res.json(); }) .then((data) => { setProjects(data); }) } useEffect(() => { getProjects(); AOS.init({disable: 'mobile'}); },[]); */ return ( <Router history={history}> <div className="App"> {projects.map((project) => { return ( <div key={project.key}> <Link to={`/project/${project.slug}`}> {project.title} </Link> </div> ); })} <Switch> {projects.map((project) => ( <Route key={project.key} exact path="/project/:slug" render={(props) => <ProjectSingle {...props} project={project} />} /> ))} </Switch> <Footer /> </div> </Router> ); }