通过反应路由器链接打字稿传递道具

Question

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

为了更好地理解，请检查代码： // I WANT TO PASS THE CURRENT PROJECT AS A PROP HERE 和 //I WANT TO GET THE PASSED PROP IN THE LINK HERE

我在 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>
  )
}

我的路线设置（省略导入）：

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;

这是从功能组件中获取属性，当用户单击路由器调用的链接时调用。这是我在路由器调用中传递道具的地方。

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

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

我检查了近似值：

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

或：

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

这最后一个与我想做的非常相似，这是通过一个状态或一个具有属性的对象，但是我无法让它工作。

来自here的其他尝试

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",

Answer 1

如果我正确理解您的问题，您希望将额外的路由状态传递给渲染组件的Route，但您不想重新处理正在渲染的组件以从路由道具中读取任何内容。

您可以“啜饮”传递的路由状态，以作为组件使用的命名道具注入/传递。

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

解构传递的路由状态值，作为特定的命名属性传递。

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

Answer 2

您的最后一个想法应该是根据反应路由器文档传递状态，也许您在组件道具中寻找道具，但链接状态值将在路由器位置对象中，location = useLocation()， https://reactrouter.com/web/api/location