reactjs - 单击时在 React JS 中路由

Question

我是 React 的新手，我想在单击按钮时导航到另一个组件。我只想执行一个简单的路由。这是我试过的代码。但我无法路由它。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import Hello from './HelloComponent';
class App extends Component {

  constructor(props) {
    super(props);
    this.try = this.try.bind(this)
  }
  try = () => {
    alert();
    <div>
      <Router>
        <Route path="/hello" component={Hello} />
      </Router>
    </div>
  }
  render() {
    return (
      <div className="App">
        <div className="container">

          <button id="b1" onClick={this.try}>Click me</button>
        </div>
      </div>
    );
  }
}
export default App;

请帮助我使用这段代码在 React JS 中执行基本路由

Answer 1

您不能将 JSX 返回给 onClick 处理程序，因为它不会对其执行任何操作。

你需要提前在render中配置你的路由，并使用history.push来改变路由

下面是一个示例代码，您可以引用

import React, { Component } from 'react';
import { BrowserRouter as Router, Route,Switch, Redirect} from 'react-router-dom'
import Hello from './HelloComponent';
class App extends Component {
  try = () => {
      this.props.history.push('/hello');
  }
  render() {
    return (
      <div className="App">
        <div className="container">
            <button id="b1" onClick ={this.try}>Click me</button>
            <Route path="/hello" component={Hello}/>
        </div>
      </div>
    );
  }
}
export default () => (
   <div>
      <Router>
           <Route component={App} />
      </Router>
  </div>
);