1

我有一个 React 应用程序，其中包含一个关于工作的详细站点，用户可以创建、编辑和查看所有工作。

从视图所有作业表中，用户可以查看有关路由到路径 jobs/:id 的一项作业的详细信息

<Link to={{ pathname: `/jobs/${props.id}` }}>View</Link>

该视图将重用主要作业组件中的许多计算属性。有没有办法可以将主要作业组件中的道具传递到作业/：id路径？

我能想到的一种选择是在上面的链接中提供它，但是当用户直接在 url 中输入路由时，这将不起作用。

我在主 App.js 文件中定义了我的路线

 <Router>
    <ResponsiveDrawer>
      <div className="App">
          <div>
            <Route exact path="/" component={Administrator} />
            <Route path="/admin" component={Administrator} />
            <Route exact path="/jobs" component={Jobs} />
            <Route path="/jobs/:id" render={({match}) => <ViewJob id={match.params.id} />} />
            <Route path="/reports" component={Reports} />
          </div>
      </div>
     </ResponsiveDrawer>
 </Router>
4

1 回答 1

0

您可以使用此方法而不是在您的路线中渲染 Viewjob

    const viewjob = ({match}) => (
            <h>{match.params.id}</h>
)
export default viewjob

只需在此视图作业组件中放置一个 console.log 即可获取匹配参数的详细信息

    const Catgeory = ({match}) => console.log('match parameteres is : ' , match )(
            <h>{match.params.id}</h>
)
export default Catgeory
于 2019-02-07T11:15:33.703 回答