javascript - 在 react js React router v4 中添加子路由

Question

我是反应路由器的新手。我所拥有的是

主.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那里并想在那里渲染一个新组件。

所以，我在这个地方完全糊涂了。谁能帮我这个 ？

谢谢 。

标签： javascriptreactjsreduxreact-reduxreact-router-v4

Answer 1

您可以使用按钮组件的Linkreact-router 中的组件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>