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 .

score 0 · Answer 1 · answered Feb 04 '19 at 06:11

0

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>

answered Feb 04 '19 at 06:11

Shubham Khatri

270,417
55
406
400

So, I just have to use this with to=create-job/new and then in main component, – ganesh kaspate Feb 04 '19 at 06:16
Yes, Also make sure JobNotFound page is rendered with `` so that it receives Router props and Link works correctly or else you can export JobNotFound like `export default withRouter(JobNotFound)` where withRouter is imported from react-router-dom – Shubham Khatri Feb 04 '19 at 06:25
Okay so I will just add withRouter in the JobNotFound page – ganesh kaspate Feb 04 '19 at 06:28
Because I am confused where should I use that – ganesh kaspate Feb 04 '19 at 06:29
Where you are rendering `` – Shubham Khatri Feb 04 '19 at 06:29
I have added that in question it is in the NewJob.js which renders on /create-job – ganesh kaspate Feb 04 '19 at 07:05
Okay so here on click of that button I have used your code and then it redirected user to the new page with the – ganesh kaspate Feb 05 '19 at 05:48

score 0 · Answer 2 · answered Feb 04 '19 at 06:17

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>

Adding the sub Route in the react js React router v4

2 Answers2