Как пропустить реквизит через роутер

Question

У меня есть список задач, на моей панели инструментов, я хочу, как только щелкнул по задаче, чтобы получить его данные.

В данный момент я могу только получить идентификатор этой задачи, но могу:я не могу получить другую информацию.

Когда я console.log listTask на моем родительском компоненте, я получаю объекты Array, которые содержат всю задачу:

[ 0: Object { state: "Started", date: "2019-02-11T19:57:26.176Z", _id:         "5c6074afd2f8eb5019fd5f54", … }
1: Object { state: "Started", date: "2019-02-11T19:57:26.176Z",                     _id:"5c60798bacf119510c19f5b1", … }
2: Object { state: "Started", date: "2019-02-11T19:57:26.176Z", _id: "5c607be3c11c2b529615ac26", … }
3: Object { state: "Started", _id: "5c607cfec27d6254c6fe0ca1", projectName: "I LOVE THIS GAME", … } ]

parentComponent.js

async componentDidMount() {
  this._isMounted = true
  let response = await fetch(`http://localhost:5001/userproject/${taskId}`)
  let data = await response.json()
  console.log(data) // will show me the array
  const projects = data.map(pro => {
    return {
      id: pro._id,
      state: pro.state,
      projectName: pro.projectName,
      consultants: pro.consultants,
      ScrumMasterUsername: pro.scrumMaster.username,
      ScrumMasterId: pro.scrumMaster._id,
    }
  })
  return this.setState({
    projects: { projects },
  })
}

render() {
  const { projects } = this.state

  const list = (projects && projects.projects) || []
  if (!projects) {
    return null
  }
  return (
    <div className="dashboard container">
      <div className="row">
        <div className="col s16 m7  darken-2">
          <ProjectList
            name={this.state.projects.projectName}
            projects={list}
          />
        </div>
        <div className="col s12 m3 offset-m1">
          <Notifications />
        </div>
      </div>
    </div>
  )
}

Моя проблема: при попытке получить сведения о задаче он получает идентификатор этой задачи, а не другие сведения:

import React from 'react'

const ProjectDetails = props => {
  const id = props.match.params.id

  console.log(props) // i can only get the id
  return (
    <div className="container section project-details">
      <div className="card z-depth-0">
        <div className="card-content">
          <span className="card-title">Project Title - {id} </span>
        </div>
      </div>
    </div>
  )
}
export default ProjectDetails

Answer 1

Это то, как вы должны это сделать.

class App extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <Switch>
                        <Route path="/" component={Home} />
                        **<Route path="/about" render={(props) => <About {...props} isAuth={"Authenticated"} />} />**
                        <Route path="/topics" component={Topics} />
                    </Switch>
                </div>
            </Router>
        );
    }
}

Второй маршрут, отмеченный между звездами, - это тот, где я рендую компонент и прохожу пропу isAuth={"Authenticated"} Вышеуказанная опора будет доступна внутриО компоненте как

const About = (props) => {
    return (
        <div>
            <h1>About={props.isAuth}</h1>
        </div>
    );
}

Надеюсь, это поможет вам !!