react 怎么路由后退

在React中使用路由有很多种方式，其中一种是使用React Router。如果你使用React Router，那么你可以使用`history`对象来实现后退操作。

首先，你需要将`history`对象传递给你的组件。你可以使用`withRouter`高阶组件包裹你的组件来实现这一点，例如：

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

class MyComponent extends React.Component {
  handleBack = () => {
    this.props.history.goBack();
  }

  render() {
    return (
      <div>
        <button onClick={this.handleBack}>Back</button>
        <p>Some content here</p>
      </div>
    );
  }
}

export default withRouter(MyComponent);

在上面的示例中，我们使用`withRouter`高阶组件将`MyComponent`组件包裹起来，并将`history`对象通过`props`传递给它。然后，在`handleBack`方法中，我们可以使用`goBack`方法来实现后退操作。

当用户点击“Back”按钮时，`handleBack`方法将被调用，`goBack`方法将使用户返回到他们之前访问的页面。

相关问题

react 获取当前路由

在 React 中，可以通过 `useLocation` 和 `useHistory` 钩子来获取当前路由信息。

使用 `useLocation` 钩子可以获取当前路径和查询参数等信息。例如：

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

function MyComponent() {
  const location = useLocation();
  const { pathname, search } = location;
  console.log(pathname); // 当前路径
  console.log(search); // 查询参数
  return (
    // ...
  );
}

使用 `useHistory` 钩子可以获取路由的历史记录，可以用来进行前进、后退等操作。例如：

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

function MyComponent() {
  const history = useHistory();
  function handleClick() {
    history.push('/other-page'); // 跳转到另外一个页面
  }
  return (
    <button onClick={handleClick}>跳转到其他页面</button>
  );
}

需要注意的是，在使用这些钩子之前，需要先使用 `BrowserRouter` 或 `HashRouter` 等路由组件进行包裹。例如：

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/" component={MyComponent} />
    </Router>
  );
}

react history和hash路由

React Router是一个用于构建单页应用程序的库。它提供了两种路由方式：history路由和hash路由。

history路由使用HTML5的history API来管理URL的变化。这种路由方式可以让URL看起来更加美观，而且可以使用浏览器的前进和后退按钮来导航。但是，它需要服务器的支持，因为在刷新页面时，服务器需要返回正确的HTML文件。

hash路由使用URL中的哈希值来管理URL的变化。这种路由方式不需要服务器的支持，因为哈希值的变化不会导致浏览器向服务器发送请求。但是，它的URL看起来不太美观，而且不能使用浏览器的前进和后退按钮来导航。