动态路由 react-router-dom

Question

我想使用 react-router-dom 在我的 React 应用程序中创建一个动态路由。我一直在阅读有关它的文档，但 none 对我的情况来说确实很有意义。我有一个项目页面，然后您可以单击项目页面中的 link，它会将您带到一个名为项目详细信息的新页面。 url 每一个都不一样。

App.js

<BrowserRouter>
        <Switch>
            <Route path="/" component={Home} exact />
            <Route path="/about" component={About} exact />
            <Route path="/projects" component={Projects} exact />
            <Route path="/workshops" component={Workshops} exact />
            <Route path="/bodywork" component={Bodywork} exact />
            <Route path="/contact" component={Contact} exact />
            <Route path="/:projectdetails" component={ProjectDetails} exact />
        </Switch>
</BrowserRouter>

有十个不同的项目，名称各不相同。它们在这样的数据文件中：

export const ObjOne = {
    title: 'Feldbewegung',
    img: './images/bodyOfEarth.jpg',
    alt: 'Feldbewegung',
    link: '/feldbewegung-details'
};

export const ObjTwo = {
    title: 'Nonmaterial city beautification',
    img: './images/bodyOfEarth.jpg',
    alt: 'Nonmaterial city beautification',
    link: '/nonmaterial-city-beautification-details'
};

export const ObjThree= {
    title: 'Body of Earth',
    img: './images/bodyOfEarth.jpg',
    alt: 'Body of Earth',
    link: '/body-of-earth-details'
};

例如三个。他们被传递到 Projects.js

import { ObjOne, ObjTwo, ObjThree, ObjFour, ObjFive, ObjSix, ObjSeven, ObjEight, ObjNine, ObjTen} from '../components/Data/projectsData';

function ProjectImage({img, alt, link, title}) {
    return (
        <>
        <div className="ProjectImage">
            <img className="project-img" src={img} alt={alt} />
            <a className="project-link" href={link}>{title}</a>
        </div>       
        </>
    )
}


function Projects({}) {
    return (
        <>
            <Navbar1 />
            <div className="page">
                <Container className="projects-container">
                    <ProjectImage {...ObjOne} />
                    <ProjectImage {...ObjTwo} />
                    <ProjectImage {...ObjThree} />


...continuing to ObjTen..

有没有办法以某种方式添加动态路由或页面？

Answer 1

有多种方法可以处理这个问题。它们可以是单独的路由，但它们不需要，因为它们都使用相同的渲染函数——不同之处在于道具（title、img 等）

我们不单独导入每个对象，而是使用 import * 将它们组合在一起作为一个对象的属性。这允许循环遍历它们。如果您决定在将来添加或删除对象，它也会更加灵活，因为更改会自动应用。

import * as projects from '../components/Data/projectsData';

您的 Projects 组件可以通过遍历所有可用项目来简化。我们将 Object.values(projects) 作为 array 而不是键控对象用于项目，然后调用数组 .map 函数。

function Projects() {
  return (
    <>
      <Navbar1 />
      <div className="page">
        <div className="projects-container">
          {Object.values(projects).map((project) => (
            <ProjectImage
              key={project.title} // items in a list need a unique key
              {...project} // pass through all props of the project object
            />
          ))}
        </div>
      </div>
    </>
  );
}

我们可以创建一个 ProjectDetails 组件，它可以检索当前 URL 的数据对象，然后使用这些属性。我们使用 react-router useParams hook 从 URL 获取 "/:projectdetails" （也可以通过 props 完成）。

export function ProjectDetails() {
  const { projectdetails } = useParams();

  // find the matching object from the array of projects
  // note that the data uses a `/` at the start, but the params does not
  const project = Object.values(projects).find(
    (project) =>
      project.link.toLowerCase().replace("/", "") === projectdetails.toLowerCase()
  );

  // need to handle any invalid urls
  if (!project) {
    // can use Redirect to redirect to a 404 page
    return <h1>Error: Project Not Found</h1>;
  }

  return (
    <div>
      <h1>{project.title} Details</h1>
      <ProjectImage {...project} />
    </div>
  );
}

CodeSandbox Link

动态路由 react-router-dom

Dynamic route react-router-dom

reactjs

react-router-dom

dynamic-url

dynamic-pages