React router accessing route properties in route component

Question

I am using React router v4 to render routes. I have a simple route component which routes to a list of items and an edit existing/add new item. This is a simple tab component built with bootstrap. I'd like to change the title of the tab component to either Add new or Edit existing depending on whether the route has an id property.

Ideally I'd like to avoid needing to create additional components as it doesn't feel like this will enhance readability of the code.

public render() {
    const { match, location } = this.props;

    const customers = cx({ active: !location.pathname.includes("AddEdit") });
    const editItem = cx({ active: location.pathname.includes("AddEdit") });

    const hasIdParam = {/* Some way to read match params to get the id */};

    return <div className='nav-component-container'>
        <nav>
            <ul>
                <li role="presentation" className={items}><NavLink to={`${match.url}/All`} activeClassName='active'>Items</NavLink></li>
                <li role="presentation" className={editItem}>
                    <NavLink to={`${match.url}/AddEdit`} activeClassName='active'>
                        {/* I'd like this to say either new item or edit existing based on whether the current route has an id parameter or not */}
                    </NavLink>
                </li>
            </ul>
        </nav>
        <Switch>
            <Route path={`${match.url}/All`} component={Customers} {...this.props}></Route>
            <Route path={`${match.url}/AddEdit/:id?`} component={Item}></Route>
        </Switch>
    </div>;
}

There are various hacks - the best of which seems to be reading the location.pathname property and use it to determine whether it's an edit or add new - that will suffice but I can't help feeling that I'm missing something in

Answer 1

You can try separating routes for edit and add but can use the same component with a type prop.

Example

    <Switch>
        <Route path={`${match.url}/All`} component={Customers} {...this.props}></Route>
        <Route path={`${match.url}/Details/:id?`} component={()=>(<Item type="detail" />)}></Route>
        <Route path={`${match.url}/Edit/:id?`} component={()=>(<Item type="edit" />)}></Route>
        <Route path={`${match.url}/Add/:id?`} component={()=>(<Item type="add" />)}></Route>
    </Switch>

Then on your Item component you can check the this.props.type and render it accordingly.

Answer 2

In your Item component,you will get url parameter i.e. id through match object of Route path .

var strId = props.match.params.id //ecma5
let strId = this.props.match.params.id //ecma6

based on strId you can changes the tab label.

if(strId){
   //use edit lable
}else{
  //add label
}