Adding the sub Route in the react js React router v4

Question

I am new to the react router. what I have is ,

Main.js

render() {
    return (
      <Router history={history}>
        <div>
          {this.props.isFetching && <Loading />}
          <Switch>
            <PrivateRoute exact path="/" component={LandingPage} />
            <PrivateRoute exact path="/create-job" component={NewJob} />
            <Route exact path="/login" component={Login} />
          </Switch>
        </div>
      </Router>
    )
  }
}

Now, In this, I have the route which is create-job . Now, In this there is one container NewJob.js

 render() {
    return (
      <Fragment>
        <SubHeader isAuthenticated={localStorage.getItem("access_token") ? true : false} />
        <JobNotFound />
      </Fragment>
    )
  }

Now, In the JObNotFound.js there is a button which is like ,

<div className="col-sm-4">
                <button className="btn btn-lg btn-primary btn-block button-container">Create New Job</button>
            </div>

Now, Here what I want to do is , onclick of this button , I want to change route to the create-job/New and want to render a new component over there.

So,I am totally confused in this place. Can any one help me with this ?

Thanks .

Answer 1

You can either use Link component from react-router of Programmatically navigate onClick of the button component

  import { Link } from 'react-router-dom';

  ...


  <div className="col-sm-4">
        <Link to="create-job"><button type='button' className="btn btn-lg btn-primary btn-block button-container">Create New Job</button></Link>
  </div>

Answer 2

In JobNotFound.js, import withRouter, and then wrap the component

import {withRouter} from 'react-router-dom'
...
//at the bottom
export default withRouter(JobNotFound)

Then in bind onClick button like following:

<div className="col-sm-4">
    <button onClick={()=>{this.props.history.push(`${process.env.PUBLIC_URL}/create-job/New`)}} className="btn btn-lg btn-primary btn-block button-container">Create New Job</button>
 </div>