如何在动态路由上渲染404页:React

Question

我试图重定向用户，如果他在下面的路由中输入错误的id，到Page404。我尝试用path="/location/*"但是它似乎不能正常工作。

提前感谢您的帮助。

<Route path="/location/:id" element={<LocationPage/>} />
<Route path="*" element={<Page404/>} />

import React, {Fragment, useEffect} from 'react'
import { useParams } from 'react-router-dom';
import locations from "../data/data.json";
import { Carousel, Infos } from "../components/LocationPageComponents"
import { Accordeon } from '../components';
const LocationPage = () => {
const { id } = useParams();
const location = locations.find(location => location.id === id)

return (
<Fragment>
<Carousel pictures={location.pictures} key={"Carousel"}/>
<Infos currentLocation={location}/>
<div className="more-infos">
<Accordeon content={{title: "Description", reply: location.description }} />
<Accordeon content={{title: "Équipements", equipments: location.equipments }} />
</div>
</Fragment>
)
}
export default LocationPage

Answer 1

即使在您的位置路径中键入不存在的id，也不会触发回退路径，因为路由是正确的。url匹配后将显示LocationPage组件。

当没有找到location时，您可以做的是显示一个空位置组件。或者使用效果路由到另一个页面，但这可能不是您想要的。

const LocationPage = () => {
const { id } = useParams();
const location = locations.find(location => location.id === id);
if (!location) {
return <EmptyLocationPage />
}

// ...
}

你的回退路由只会被你的路由组件中没有定义的路由触发。例如:

/location/1/fail
/locations
/location
/whatever