通过反应路由器链接打字稿传递道具 [英] Pass props through react router link typescript

问题描述

我已经定义了我的路线并且我的链接工作正常.当路由器调用组件时，我想通过链接传递一个道具.我不知道这是否可能.

为了更好地理解，请检查代码://我想在此处将当前项目作为道具传递 和 //我想在此处的链接中获取已传递的道具

我在反应中的功能组件:

const ProjectList = () =>{....//没有意义的代码.我从对数据库的调用中获取数据，因此它不会作为参数传入返回(<div className=项目列表部分">{ 项目 &&项目.地图(项目 => {const path = '/project/' + project.id;返回 (<Link to={path} key={project.id}>//我想将当前项目作为道具传递给这里<ProjectSummary project={project} deleteCallback={projectDelete}/></链接>)})}

)}

我的路线设置(省略导入):

function App() {返回 (<浏览器路由器>
<导航栏/><开关><路由精确路径='/' component={Dashboard}/><路线路径='/项目/:id'渲染={(道具)=>(<ProjectDetails {...props}/>//我想在这里的链接中获得通过的道具)}/><Route path='/signin' component={SignIn}/><Route path='/signup' component={SignUp}/><Route path='/create' component={CreateProject}/></开关>
</BrowserRouter>);}导出默认应用程序；

这是从功能组件中获取属性，当用户单击由路由器调用的链接时调用.这是我在 Router 调用时传入 prop 的地方.

不是很相关，但是要从上面的代码中检查相应 Route 子组件的名称，它会是:

const ProjectDetails = (project: IFirebaseProject) =>{//....没有意义的代码}

我检查了近似值:

或:

这最后一个与我想做的非常相似，这是传递一个状态或一个具有属性的对象，但是我无法使其工作.

其他尝试来自这里

来自 package.json 的相关版本信息:

打字稿":^4.1.3"，反应":^ 17.0.1"，react-dom":^17.0.1"，react-redux":^7.2.2"，react-router-dom":^5.2.0"，

解决方案

如果我正确理解你的问题，你想将额外的路由状态传递给渲染组件的 Route，但你没有想要重新设计正在渲染的组件以从路由道具中读取任何内容.

您可以啜饮"传递的路由状态作为组件消耗的命名道具被注入/传递.

<链接到={{路径名:路径，状态: {项目，},}}键={project.id}><ProjectSummary project={project} deleteCallback={projectDelete}/></链接>

将传递的路由状态值分解为特定的命名道具.

<路由路径='/项目/:id'渲染={({位置})=>{const { 状态} = 位置；return <ProjectDetails project={state.project}/>}}/>

I have my routes defined and my links working fine. I would like to pass a prop through the link when the component is called by the router. I dont know if that is even possible.

For better understanding please check in the code: // I WANT TO PASS THE CURRENT PROJECT AS A PROP HERE and //I WANT TO GET THE PASSED PROP IN THE LINK HERE

My functional component in react:

const ProjectList = () => {
....//not meaningful code. I get my data from a call to a database so its not passed in as an argument

return(
    <div className="project-list section">
      { projects && projects.map( project => {
        const path = '/project/' + project.id;
        return (
          <Link to={path} key={project.id}> // I WANT TO PASS THE CURRENT PROJECT AS A PROP HERE
            <ProjectSummary project={project} deleteCallback={projectDelete}/>
          </Link>
        )
      })}  
    </div>
  )
}

My routes setup (imports omitted):

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <NavBar />
        <Switch>
          <Route exact path='/' component={Dashboard}/>
          <Route
          path='/project/:id'
          render={(props) => (
            <ProjectDetails {...props}/> //I WANT TO GET THE PASSED PROP IN THE LINK HERE
          )}
          />
          <Route path='/signin' component={SignIn}/>
          <Route path='/signup' component={SignUp}/>
          <Route path='/create' component={CreateProject}/>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

This is to get the property from a functional component, called when the user clicks the link so called by the Router. This is where I would pass the prop in, on the Router call.

Not very relevant, but to check the name of the according Route child component from the code above, it would be a:

const ProjectDetails = (project: IFirebaseProject) => {
    //....not meaningfull code
}

I checked approximations as:

<Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link>

or:

<Link to={{
  pathname: '/tylermcginnis',
  state: {
    fromNotifications: true
  }
}}>Tyler McGinnis</Link>

This last one is very similar to what I would like to do, this is pass a state or an object with properties through, however I am not able to make it work.

Other attempts got from here

Relevant versions info from the package.json:

"typescript": "^4.1.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",

解决方案

If I understand your question correctly, you want to pass additional route state to the Route rendering the component, but you don't want to rework the component being rendered to read anything from route props.

You can "sip" the passed route state to be injected/passed as the named prop your component consumes.

<Link
  to={{
    pathname: path,
    state: {
      project,
    },
  }}
  key={project.id}
>
  <ProjectSummary project={project} deleteCallback={projectDelete}/>
</Link>

Destructure the passed route state value to be passed as specific named prop.

<Route
  path='/project/:id'
  render={({ location }) => {
    const { state } = location;
    return <ProjectDetails project={state.project} /> 
  }}
/>

这篇关于通过反应路由器链接打字稿传递道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！