React pass object by routing?

Question

What I want to do is set routing to my object. For example:

I set routing for:

http://localhost:3000/projects

It displays all my projects list (it works pretty ok)

Then I want to choose project and see details, but it doesn't work properly:

http://localhost:3000/projects/3

How it looks like:

When I click to Details button, it sends me to /projects:id but I get an error, that items in project are undefined.

My code. I store all routing in main App.js file:

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;

I have ProjectsList.js component (i will include code of it if needed), in ProjectsList.js i have listgroup with Project.js that looks like this:

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;

By Link to my browser pass me to proper URL (projects/2... etc) but i dont know how to pass object of project to ProjectDetails.js component. Code of it below:

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

Could you tell me, how to pass object of project by Link to into ProjectDetails.js? For now, i get description as undefined (its obviouse because i pass nothing to component with details).

i get a downvote, it would be nice if i could know, for what? — michasacuer2, Dec 17 '18 at 11:57
Does this answer your question? [React router, pass data when navigating programmatically?](https://stackoverflow.com/questions/42173786/react-router-pass-data-when-navigating-programmatically) — August Janse, Sep 22 '21 at 07:52

score 1 · Answer 1 · answered Dec 17 '18 at 14:44

You need to use mapStateToProps here. and wrap your component in the conncet from react-redux.

It should be like:

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

But how `Project.js` should looks like to get that DATA u mentioned? — michasacuer2, Dec 17 '18 at 15:01

score 1 · Accepted Answer · answered Dec 18 '18 at 07:34

1

Use the render method in your route and pass the props.

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

answered Dec 18 '18 at 07:34

onejeet

1,191
6
14

score 0 · Answer 3 · answered Dec 18 '18 at 07:27

This is what it will look like..!!

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

React pass object by routing?

3 Answers3