如何使用反应路由器导航到其他页面

Question

我有一个 onClick 功能可以导航到其他页面。我尝试了 this.props.history.push("/SecondPage/ID/") 和一些示例，但没有成功。

我有这样的组件：

export class MainPage extends Component {  
  constructor(props) {
    super(props);
  }
  render(){
    return (
        <div id="main" onClick={this.NavigatetoOtherPage.bind(this)}>
    )
  }  
  NavigatetoOtherPage(){
     let ID = this.props.ID; // I need to pass the ID as a parameter.
      //Here I need to navigate to other page using. I can use window.location.href but I need to use react router.
  }
}
export default connect(state => {
return {
    ID: state.Reducer.ID,       
};
})(MainPage)

我的 app.js 文件是这样的

export default class App extends Component {

render() {
    return (
        <Provider store={store}>               
            <Route exact path='/' component={MainPage}/>               
            <Route path='/SecondPage/:ID/' component = {SecondPage} />
        </Provider>
    );
}
}

我的 index.js 页面是这样的

export function renderPage() {  
ReactDOM.render(
    <Router>
        <App />
    </Router>
    , document.getElementById('root'));

}
renderPage();

如何在没有 window.location.href 的情况下导航到第二页

Answer 1

你可以使用useHistory钩子或Link组件，因为你正在使用react-router-dom

import React from "react";
import { useHistory, Link } from "react-router-dom";

 // Then in your component
 const MainPage = (props) => {
  /**
   * hooks
   */
  const history = useHistory();

  /**
   * function
   */
  const handleNavigation = () => {
   let ID = props.ID; // I need to pass the ID as a parameter.
  
    history.push(`/dashboard/${ID}`)
  }

  return (
    <button id="main" onClick={() => history.push("/")}> Go to / </button>
    <button id="main" onClick={() => handleNavigation()}> Go to dynamic page 
    </button>
    <Link to={`/dashboard/${props.ID}`} className="some-styling">
      Using Link
    </Link>
  );
};

// I have merged both implementations



export default MainPage;

// 已编辑：根据评论，问题是“历史没有出现在道具中。”

// Then you could use `withRouter` HOC, and then there will be 
// the `history` object in the wrapped component's props.

import {withRouter} from 'react-router-dom';


class MainPage extends React.Component {

  render(){
    console.log(this.props.history) // history object
    return(<div />)
  }
}

export default withRouter(MainPage)`

Answer 2

写了一个小沙盒。我想这就是你想要实现的目标。

https://codesandbox.io/s/practical-tereshkova-ilbig?file=/src/App.js