如何使用 react-router-dom 将道具分享到不同的路线？

Question

我正在尝试将我的道具（ data, saveWorkButtonClicked, updateFBRDB ）从<ProjectPage />组件路由共享到<Indent />组件路由。

但是出现以下错误：

Uncaught DOMException: Failed to execute 'pushState' on 'History': async (data, setSpinner, updateFBRDB) => {
  setSpinner && setSpinner(true);
  let rawRoomData = String.raw`${J...<omitted>...
} could not be cloned.

应用程序.js

<Router>
  <Switch>
    <Route path="/ProjectPage/:projectId" exact component={ProjectPage} />
    <Route path="/Indent/" render={(props) => <Indent {...props} />} />
  </Switch>
</Router>

项目页面.js

history.push("/Indent/",
  {
    data: { ...project, rooms: project.rooms, ProjectId: project.ProjectId, ClientName: project.ClientName, Address: project.Address, AmountRecieved: project.AmountReceived, SiteEngineerId: project.SiteEngineersId },
    saveWorkButtonClicked,
    updateFBRDB,
  }
)

// saveWorkButtonClicked & updateFBRDB are API calls which will be called in <Indent />

缩进.js

export default function Indent({ data, saveWorkButtonClicked, updateFBRDB }) {
    console.log('data in indent', data)
}

注意：请给出可以在没有 Context/Redux/Mobx 的情况下实现的解决方案。 另外，我正在使用 react-router-dom v5.2.0

Answer 1

我会建议一个解决方法。 有一个 state 可以跟踪您何时要移至下一页，以便我们可以有条件地使用Redirect组件并将您想要的数据作为道具。

应用程序.js

<Router>
  <Switch>
    <Route path="/ProjectPage/:projectId" exact component={ProjectPage} />
  </Switch>
</Router>

项目页面.js

const [isDone, setIsDone] = useState(false);

const handleClick = () => {
    
    // Do all your works, when you want to `push` to next page, set the state.
    setIsDone(true);

}


if(isDone) {
   return (
     <>
       <Route path="/Indent"
              render={ props =>
                <Indent
                  {...props}
                  data={...}
                  saveWorkButtonClicked={saveWorkButtonClicked}
                  updateFBRDB={updateFBRDB}
                />
             }
       />
       <Redirect to="/Indent" />
     </>

   );
}
 

return (
  <div>Your Normal Profile Page goes here</div>
)

Answer 2

如果你想“分享”道具，你需要做两件事之一。 要么让接收组件成为 propsharing 组件的子组件——在这种情况下，您可以直接将它们作为 props 传递。 否则，您需要通过公共祖先组件将它们作为 state 传递，您需要通过向将更新 state 的组件发送回调来更新该组件。

Answer 3

您可以使用此格式将state传递到location

const location = {
   pathname: '/Indent/',
   state: {
     data: { ...project, rooms: project.rooms, ProjectId: project.ProjectId, ClientName: project.ClientName, Address: project.Address, AmountRecieved: project.AmountReceived, SiteEngineerId: project.SiteEngineersId },
     saveWorkButtonClicked,
     updateFBRDB,
   }
}
history.push(location)

然后使用withRouter接收位置值

import { withRouter } from 'react-router'

function Indent({ location }) {
    const { state } = location
    const { data, saveWorkButtonClicked, updateFBRDB } = state || {}
 
    return <></>
}

export default withRouter(Indent)