在反应中使用 <Link> 将对象数组传递给另一个组件

Posted 2023-02-21

【中文标题】在反应中使用 <Link> 将对象数组传递给另一个组件

【英文标题】：Pass an array of objects to another component using <Link> in react

【发布时间】：2018-04-25 00:48:14

【问题描述】：

有没有一种方法可以将数组线道具传递给子组件以与<Link to="/abc/results"> 做出反应 - 结果组件需要来自主组件的数组来呈现数据。这个怎么做？ 还有其他关于发送单个 id 的讨论 - 也附加到 url - 但我的问题是 - 有没有一种方法可以发送数据，比如使用 Link 的 n 个对象的数组？

更新： 客户端/index.js

import React from 'react';
import  render  from 'react-dom';
import  BrowserRouter as Router  from 'react-router-dom';
import  Provider  from 'react-redux';
import store from '../components/redux/store';
import App from '../components/app/app';

render((
  <Provider store=store>
    <Router>
      <App />
    </Router>
  </Provider>
), document.getElementById('root'));

server.js：

export default function (req, res, next) 
  const store = createStore(reducers, , applyMiddleware(thunk));
  let foundPath = null;
  let  path, component  = routes.routes.find(
    ( path, exact ) => 
      foundPath = matchPath(req.url,
        
          path,
          exact,
          strict: false
        
      );
      return foundPath;
    ) || ;
  if (!component) 
    component = ;
  
  if (!component.fetchData) 
    component.fetchData = () => new Promise((resolve, reject) => resolve());
  
  component.fetchData( store, params: (foundPath ? foundPath.params : ) ).then(() => 
    const state = store.getState();
    const preloadedState = JSON.stringify(state).replace(/</g, '\\u003c');
    const context = ;

    const html = ReactDOMServer.renderToStaticMarkup(
      <Provider store=store >
        <Router location=req.url context=context >
          <App />
        </Router>
      </Provider>
    );

....

 <Link to= pathname: '/abc/testing/results', state:  results: resultsArray  > Click </Link>

路线： ....

routes: [

      
          path: '/abc/testing/results',
          component: Results,
          exact: true
        ,
..,
..,
]

......

【问题讨论】：

Pass props in Link react-router的可能重复

【参考方案1】：

您可以在 React Router V4 中使用 location 对象来传递 state。 你的Link 想要

<Link to=
  pathname: '/abc/results',
  state:  myArrayVariableName: myArrayVariable
/>

更多信息在docs

在Results 中，您将访问this.props.location.state.myArrayVariableName 的值

【讨论】：

***.com/users/2345964/palsrealm - 我已经在我的代码中实现了 - 链接 url 在页面上的链接中不起作用 - 如果我直接访问页面加载的链接？我还需要做些什么吗 - 更新了我的答案 - 我看到 url 发生了变化，但没有导航到那个页面

您需要有一个Route 来处理您从中路由到结果的页面上的路径。 Link 组件将使用 history 对象设置页面的 URL。当您的应用导航到该 URL 时，您的 Route 将触发所需组件的加载。

您需要发布更多路由器代码。看起来你的路线没有被触发。

好吧，我猜这是因为服务器端渲染和我设置路由器的方式？我已经更新了我的 server.js 和 routes.js

您的部分代码存在一些问题，尚未发布。请参阅***.com/help/mcve 以提供可验证的示例以进行调试。

【参考方案2】：

//first component
<Link
    to=
      pathname: `/trainer`,
      state: 
        instructor_id: ["abc","bcd"],
      ,
    >
    click here
  </Link>
  



//second component to fetch data

console.log(this.props.history.location.state.instructor_id);