Question

有没有办法可以将数组线道具传递给与<Link to="/abc/results">做出反应的子组件 - 结果组件需要主组件中的数组来呈现数据。这该怎么做？还有其他关于发送单个id的讨论 - 也附加到url - 但我的问题是 - 有没有办法我们可以像链接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

您可以使用location对象在React Router V4中传递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);

使用<link />将一个对象数组传递给另一个组件

2 个答案: