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

Question

有没有一种方法可以将数组线道具传递给子组件以与<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
        },
{..},
{..},
]

......

Answer 1

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

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

更多信息在docs

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

Answer 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);