如何解决如何创建动态路由,以基于react-router-dom中组件的属性命名路由
让我们想象一下,我有一个组件可以连续显示多个div。
非常简单
if (props.hotels.length != undefined) {
const data = props.hotels;
const listItems = data.map((d) => (
<div className="hotel-row">
<Hotel name={d.name} category={d.category} image={d.image} description={d.description}/>
</div>
));
return <div className="hotel-list">{listItems}</div>;
}
上面的代码将返回一个包含酒店内容的div列表,这很简单。
import * as React from "react";
const Hotel = (props) => {
return <p>{props.name} {props.category} {props.image} {props.description}</p>
};
export default Hotel
现在,我希望单击一下每个div即可将我重定向到新路线。
这条路线应该是
/hotel/{d.name}
我正在考虑做这样的事情
<div className="hotel-row">
<Hotel name={d.name} category={d.category} image={d.image} description={d.description} onClick={() => <Redirect to={"/"+d.name} />}/>
</div>
然后我想在组件安装期间在该路由上加载d.name的其余部分,这样我就可以从api中获取
。我的路由器当前看起来像这样
import * as React from "react";
import { Route,Switch,withRouter,Redirect } from "react-router-dom";
import HotelList from "../Components/HotelList";
import Count from "../Components/Count";
const Router = () => {
const renderFor404Routes = () => <Redirect to="/" />;
return (
<div>
<Switch>
<Route exactly component={HotelList} exact path="/" />
<Route exactly component={Count} exact path="/count" />
<Route path="/" exactly component={renderFor404Routes} />
</Switch>
</div>
);
};
export default withRouter(Router);
这似乎也是个问题,因为如果我想导航至类似的路线
/ hotel / name,并且该名称在我的数据库中不存在,它不会获取任何内容,并且该组件会崩溃
解决方法
您正在谈论的是使用动态路由。非常普遍的问题,并不是很难做到。首先,我将使用<Hotel>
道具将您的<Link>
转换为to
:
const Hotel = (props) => {
return
<Link to={`/${props.name}`}>
{props.name} {props.category} {props.image} {props.description}
</Link>
};
现在您不需要onClick => <Redirect />
,这很尴尬。 Link
将为您完成此任务。现在,您需要设置一个能够处理动态生成的路由的组件:
// in your Switch statement:
<Route path="hotels/:hotelid" exactly component={HotelPage} />
因此,现在路由到/hotel/somehotelId
将呈现您的HotelPage
组件。当然,在该组件内,您需要获取路由到的特定ID。这是match
道具的一部分:
const HotelPage = ({ match }) => {
const { hotelId } = match.location
// now you can make any API calls related to that hotel id,// or render whatever you need based on that id
}
这是一个快速的总结。 This article是对相同概念的更详细说明。
,通过反应路由器dom,您可以使用路径参数来实现此目的,在路径参数中,您可以指定一条具有/hotel/:name
之类的路由,其中name
是路径参数的名称。
因此,您可以向<Switch>
添加另一个路径,如
<Route exact path="/hotel/:name" component={HotelByName} />
假设渲染组件HotelByName
,react-router-dom通过使用react-router-dom提供的useParams()
钩子提供特定路径参数的值。之后,您可以将其用于您的
例如,代表HotelByName(挂钩)
function HotelByName() {
// We can use the `useParams` hook here to access
// the dynamic pieces of the URL.
let { name } = useParams();
//or component did mount if class based
useEffect(() => {
//make API request with acquired name
},[])
return (
<div>
{/* Whatever hotel data you extract */}
</div>
);
}
基于类的组件
class HotelByName extends Component {
componentDidMount = () => {
let { name } = this.props.match.params;
//make request with acquired name
}
render () {
return (
<div>
{/* Whatever hotel data you extract */}
</div>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。