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" ponent={ProjectsList} />
            <Route exact path="/projects/:id" ponent={ProjectDetails} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

I have ProjectsList.js ponent (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 ponent. 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 ponent with details).

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" ponent={ProjectsList} />
            <Route exact path="/projects/:id" ponent={ProjectDetails} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

I have ProjectsList.js ponent (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 ponent. 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 ponent with details).

• javascript
• reactjs
• react-router
• react-bootstrap
• react-router-dom

• i get a downvote, it would be nice if i could know, for what? – michasacuer2 Commented Dec 17, 2018 at 11:57
• Does this answer your question? React router, pass data when navigating programmatically? – August Janse Commented Sep 22, 2021 at 7:52

3 Answers 3

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

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

You need to use mapStateToProps here. and wrap your ponent 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))

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