Question

我是React Router的新手。我拥有的是，

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

您可以使用按钮组件Link的react-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>

Answer 2

在JobNotFound.js中，使用Router导入，然后包装组件

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

然后按如下所示绑定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>

在react js React router v4

2 个答案: