react this.$router.go(-1);

在React中，我们使用react-router来进行路由管理。如果你想在React组件中实现类似于`this.$router.go(-1)`的功能，可以按照以下步骤操作：

1. 首先，确保你已经安装了`react-router-dom`依赖包。你可以使用以下命令进行安装：

npm install react-router-dom

2. 在你的组件文件中引入`BrowserRouter`和`useHistory`：

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

3. 在组件函数内部使用`useHistory`钩子来获取路由历史对象：

const history = useHistory();

4. 然后，你可以通过调用`history.goBack()`方法来返回上一个路由页面：

history.goBack();

这样就可以实现在React中返回上一个页面的功能了。希望对你有所帮助！

相关问题

$router' was accessed via 'this'. Avoid using 'this' in templates.

在 Vue.js 或其他类似的前端路由管理库（如 React Router）中，当你在模板（template）中直接使用 `this.$router` 访问路由器实例时，Vue 报出这个警告是提醒你尽量避免这种情况。`$router` 是一个依赖注入的服务，通常在组件的生命周期钩子（如 `mounted()`、`beforeRouteEnter` 等）或计算属性（computed property）中被引用，而不是在模板的 HTML 中直接访问。

Vue 提醒你避免使用 `this` 是因为：

1. **代码可复用性**：将 `$router` 作为局部变量，可以在不依赖组件实例的上下文中使用，提高了代码的可重用性和模块化程度。

2. **解耦**：减少对组件实例的紧密耦合，这样即使路由发生变化，相关的逻辑也不至于受此影响。

3. **更好的性能**：在某些情况下，例如在异步组件或动态组件中，直接访问 `this.$router` 可能会触发不必要的渲染，而提前声明和使用变量可以优化这部分操作。

要遵循最佳实践，你应该在需要的地方导入路由实例，然后按照需要的方式来使用它，例如：

// 在组件中
export default {
  setup() {
    const router = ref(null); // 初始化一个响应式的路由器引用

    onMounted(() => {
      router.value = inject('router'); // 在组件挂载时注入路由
    });

    return { router };
  },
  
  // 使用router
  mounted() {
    this.router.push('/some-route');
  }
};

或者如果你在模板中确实需要一个快捷的方式访问路由，可以考虑使用一个计算属性：

<template>
  <button @click="navigateToSomeRoute">Go to Some Route</button>
</template>

<script>
export default {
  computed: {
    router () { return inject('router') } // 计算属性获取并缓存路由
  },
  methods: {
    navigateToSomeRoute() {
      this.router.push('/some-route');
    }
  }
};
</script>

react history.push 代码 demo

以下是一个简单的 React 应用程序中使用 `history.push()` 进行页面跳转的示例代码：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useHistory } from 'react-router-dom';

const Home = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to About Page</button>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page.</p>
      <Link to="/">Go back to Home Page</Link>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
      </Switch>
    </Router>
  );
};

export default App;

在上面的示例代码中，我们首先导入 `useHistory` 钩子，然后在 `Home` 组件中使用 `useHistory` 钩子来获取 `history` 对象。我们定义了一个 `handleClick` 函数，在点击按钮时使用 `history.push('/about')` 来跳转到关于页面。在 `About` 组件中，我们使用 `Link` 组件来返回到主页。最后，我们将 `Home` 和 `About` 组件包装在 `Switch` 和 `Route` 组件中，并将其添加到 `Router` 组件中。