只需使用useNavigate from react router dom

import { useNavigate } from "react-router-dom";

const MYComponent = () => {
    const navigate = useNavigate();

    navigate("Xyz/MYRoutes");

 
}

export default MYComponent;

在代码中使用上述的useNavigate功能。

只需使用useNavigate from react router dom

import { useNavigate } from "react-router-dom";

const MYComponent = () => {
    const navigate = useNavigate();

    navigate("Xyz/MYRoutes");

 
}

export default MYComponent;

在代码中使用上述的useNavigate功能。

试试React Hook Router，“反应路由器的现代替代品”：

import { useRoutes, usePath, A} from "hookrouter";

要回答OP关于通过选择框链接的问题，您可以这样做：

navigate('/about');

更新的答案

我认为React Hook Router是一个很好的入门套件，帮助我学习了路由，但我后来更新了React Router，了解了它的历史和查询参数处理。

import { useLocation, useHistory } from 'react-router-dom';


const Component = (props) => {
    const history = useHistory();

    // Programmatically navigate
    history.push(newUrlString);
}

您可以将要导航到的位置推到历史位置。

要以编程方式进行导航，您需要将新的历史推送到组件中的props.history，这样就可以完成以下工作：

//using ES6
import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(e) {
    e.preventDefault()
    /* Look at here, you can add it here */
    this.props.history.push('/redirected');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Redirect!!!
        </button>
      </div>
    )
  }
}

export default App;

React Router 4.x答案

在我这一方面，我希望有一个单独的历史对象，我甚至可以携带外部组件。我喜欢按需导入一个history.js文件，并对其进行操作。

您只需将BrowserRouter更改为Router，并指定历史属性。这对你来说没有任何改变，除了你有自己的历史对象，你可以随心所欲地操纵它。

您需要安装历史记录，即react router使用的库。

示例用法，ES6表示法：

history.js

import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()

基本组件.js

import React, { Component } from 'react';
import history from './history';

class BasicComponent extends Component {

    goToIndex(e){
        e.preventDefault();
        history.push('/');
    }

    render(){
        return <a href="#" onClick={this.goToIndex}>Previous</a>;
    }
}

如果您必须从实际从Route组件渲染的组件进行导航，还可以从props访问历史，如下所示：

基本组件.js

import React, { Component } from 'react';

class BasicComponent extends Component {

    navigate(e){
        e.preventDefault();
        this.props.history.push('/url');
    }

    render(){
        return <a href="#" onClick={this.navigate}>Previous</a>;
    }
}

只需使用this.props.history.push（'/where/to/go'）；