التنقل برمجيًا باستخدام react-router

 إذا كنت تستخدم React Router >5.1.0 والمكونات الوظيفية فيمكنك استخدام الخطاف useHistory واستخدامه كالتالي :

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

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

مرحباً @Rayden Storm
أنصحك بعمل خدمة لل Navigation عن طريق استخدام React-Router و Redux ومكتبة connected-react-router كالآتي :
 

import { push, replace, goBack, goForward, } from 'connected-react-router';

import { store } from '../App';

export default {
  go: (path, state) => store.dispatch(push(path, state)),
  replace: (path, state) => store.dispatch(replace(path, state)),
  goBack: () => store.dispatch(goBack()),
  goForward: () => store.dispatch(goForward()),
};

ثم يمكنك استخدامها برمجياً  كالآتي
 

import Navigate from './Services/Navigate';

class App extends React.Component {
	handleClick = () => {
    	Navigate.go('/courses');
    }
    
    render() {
    	return(
        	<button onClick={this.handleClick}>click Me</button>
        );
    }
}