动态路由react-router-dom

Question

我想在我的react应用程序中使用react-router-dom创建一个动态路由。我一直在阅读相关文件，但在我的情况下，没有一个是真正有意义的。我有一个项目页面，然后你可以点击项目页面中的链接，它会把你带到一个名为项目详细信息的新页面。每个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 *将它们作为一个对象的属性组合在一起。这允许up循环遍历它们。如果您决定将来添加或删除对象，它也会更加灵活，因为更改将自动应用。

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钩子(也可以通过props来完成)从URL中获取"/:projectdetails"。

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联系