Hide URL id from parameter string react router

Question

I created dynamic routes based on an id param passed to my react route. But, I would like the url to show as follows: "projects/:id=projectname"
But I would like to hide the ":id=" part of the string. How can I achieve this?

My code below:

Link to direct to the routes:

<Link to = {{pathname: `${PROJECT}=${props.projectDetails.id}`, state: {projectDetails: props.projectDetails}}}/>

Route defined:

Route exact path = "/projects/:id" component = {Project} drawerOpen = {this.state.drawerOpen} toggleDrawer = {this.toggleDrawer}/>

The route component:

import React, { Component } from 'react';
import DashboardLayout from '../components/dashboardLayout';
import * as Constants from '../common/constants'
import { setCurrentProject } from '../store/project/projectActions';
import '../styles/app.css'

class Project extends Component {
  constructor( props ) {
    super( props )
      this.state = {
      listItems: ["Home", "Projects"],
      theme: Constants.darkTheme,
      formModalOpen: false,
      alertModalOpen: false,
      deleteAlertActive: false,
      domainUsers: [],
      currentProject: props.location.state.projectDetails,
      value: 0
    }
  }

  componentDidMount() {
    this.props.dispatch( setCurrentProject(this.props.location.state.projectDetails) )
  }

  render() {
    return (
    <div>
      <DashboardLayout
        appState = {this.state.currentProject.id}
        isOpen = {this.props.drawerOpen}
        toggleDrawer = {this.props.toggleDrawer}
        menuItems = {this.state.listItems}
        listItemClicked = {this.setTitle}/>
    </div> 
    );
  }
}

export default Project;

Trung Nguyen · Accepted Answer · 2020-06-30 03:57:12Z

3

In a simple way: You don't need to pass id to your Route's path. Create route without id and pass id as a prop to your Project component.

<Route exact path="/project" render={() => (<Project id={id} />)} />

Or you can pass it as a state prop in Link component.

<Link
  to={{
    pathname: `${PROJECT}`,
    state: {
      projectDetails: props.projectDetails,
      id: id // id you want to get in Project component
    }
  }}
/>

answered Jun 30, 2020 at 3:57

Trung Nguyen

1662 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Drew Reese · Accepted Answer · 2020-06-30 04:06:51Z

1

It appears as though you are conflating a route's match.params for an URL's query parameters. You've defined your route path to be path = "/projects/:id", which means your URLs should look like "/projects/someProjectId", without any query parameters.

You send the id both in the match params, i.e. props.match.params and in the route state, i.e. props.location.state.projectDetails.id. Just access it in the receiving component off the route props.

Also, construct the URL correctly, ${PROJECT}/${props.projectDetails.id} versus ${PROJECT}=${props.projectDetails.id}.

<Link
  to={{
    pathname: `${PROJECT}/${props.projectDetails.id}`, // assumes PROJECT resolves to "/projects"
    state: {
      projectDetails: props.projectDetails,
    },
  }}
/>

edited Jun 30, 2020 at 4:06

answered Jun 30, 2020 at 3:32

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Collectives™ on Stack Overflow

Hide URL id from parameter string react router

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related