Добавление sub Route в реакции JS React маршрутизатор v4

Question

Я новичок в реакции маршрутизатора.у меня есть

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

Теперь у меня есть маршрут, который create-job.Теперь, в этом есть один контейнер NewJob.js

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

Теперь, в JObNotFound.js есть кнопка, которая похожа,

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

Теперь, вот что я хочуonclick of this button, я хочу изменить маршрут на create-job/New и хочу отобразить там новый компонент.

Итак, я полностью запутался в этом месте.Может ли кто-нибудь помочь мне с этим?

Спасибо.

Answer 1

В JobNotFound.js импортируйте с помощью Router, а затем оберните компонент

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

Затем нажмите кнопку bind onClick, как показано ниже:

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

Answer 2

Вы можете использовать компонент Link от реакции-маршрутизатора Programmatically navigate onClick компонента кнопки

  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>