Реагировать на передачу объекта путем маршрутизации?

Question

То, что я хочу сделать, это установить маршрутизацию к моему объекту.Например:

Я установил маршрутизацию для:

http://localhost:3000/projects

Он отображает список всех моих проектов (работает довольно хорошо)

Затем я хочу выбрать проект и посмотреть детали, но это не работает должным образом:

http://localhost:3000/projects/3

Как это выглядит:

Когда я нажимаю Details Кнопка отправляет мне на /projects:id, но я получаю сообщение об ошибке, что элементы в project не определены.

Мой код.Я храню всю маршрутизацию в основном App.js файле:

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <Route exact path="/projects" component={ProjectsList} />
            <Route exact path="/projects/:id" component={ProjectDetails} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

У меня есть ProjectsList.js компонент (я буду включать его код при необходимости), в ProjectsList.js у меня есть listgroupс Project.js, который выглядит следующим образом:

class Project extends Component {
  render() {
    return (
      <ButtonToolbar>
        <ListGroupItem>{this.props.project.name</ListGroupItem>
        <Link to={`/projects/${this.props.project.id}`}>
          <Button>Details</Button>
        </Link>
      </ButtonToolbar>
    );
  }
}
export default Project;

По Link to мой браузер передает мне правильный URL (projects/2... и т. д.), но я не знаю, как передать объектproject до ProjectDetails.js компонент.Код этого ниже:

class ProjectDetails extends Component {
  render() {
    return <li>{this.props.project.description}</li>;
  }
}
export default ProjectDetails;

Не могли бы вы сказать, как передать объект project на Link to в ProjectDetails.js?На данный момент я получаю description как неопределенное (это очевидно, потому что я ничего не передаю компоненту с деталями).

Answer 1

Вот так это будет выглядеть .. !!

class Project extends Component {
  render() {
    return (
      <ButtonToolbar>
        <ListGroupItem>{this.props.project.name</ListGroupItem>
        <Link to={`/projects/${this.props.project.id}`}>
          <Button>Details</Button>
        </Link>
      </ButtonToolbar>
    );
  }
}

function mapStateToProps(state, ownProps){
   return { project : { id: ownProps.params.id } }
}

export default connect((mapStateToProps)(Project))

Answer 2

Используйте метод рендеринга в вашем маршруте и передайте реквизит.

   <Route exact path="/projects/:id" render={() => (
         <ProjectDetails
         project = {project}
         />
   )}/>

Answer 3

Вам нужно использовать mapStateToProps здесь.и оберните ваш компонент в conncet из react-redux.

Это должно быть как:

import {connect} from 'react-redux';

class ProjectDetails extends Component {
  render() {
    return <li>{this.props.project.description}</li>;
  }
}

function mapStateToProps(state, ownProps){
   const projectInstance = DATA //the Data you are getting or fetching from the ID.
   return { project : projectInstance }
}

export default connect((mapStateToProps)(ProjectDetails))