React-Router5-路由组件参数传递




import React from 'react';
import { Route, Switch } from 'react-router-dom';
 
// 假设我们有一个User组件，需要根据URL中的:id参数来显示用户信息
const User = ({ match }) => (
  <div>
    <h1>User ID: {match.params.id}</h1>
  </div>
);
 
const AppRouter = () => (
  <Switch>
    <Route exact path="/user/:id" component={User} />
    {/* 其他路由配置 */}
  </Switch>
);
 
export default AppRouter;

在这个例子中，我们定义了一个User组件，它通过match.params.id来接收URL中的参数，并在页面上显示用户ID。然后我们定义了一个AppRouter组件，在这个组件中，我们使用<Route>组件和exact属性来确保当URL匹配/user/:id时，才会渲染User组件，并且将参数传递给它。

React-Router5-路由组件参数传递

评论已关闭

推荐阅读