react 如何控制路由跳转的时候，不刷新组件

React 中可以使用 React Router 实现路由跳转。在 React Router 中，可以使用 Link 组件或者编程式导航实现路由跳转。

如果想在路由跳转的时候不刷新组件，可以使用 React Router 中的 `push` 和 `replace` 方法进行编程式导航。

例如，使用 `push` 方法跳转路由时，可以在目标路由组件中接收到新的 props，但是不会重新渲染整个组件树。

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

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

  const handleClick = () => {
    history.push('/new-route');
  };

  return (
    <button onClick={handleClick}>Go to new route</button>
  );
}

在上面的例子中，当用户点击按钮时，调用 `handleClick` 方法，使用 `history.push` 方法进行路由跳转。这样会加载新的路由组件，但不会刷新整个组件树。

相关问题

react路由跳转刷新

在React中，使用React Router来处理路由跳转。默认情况下，React Router会使用浏览器的History API来改变URL，但不会触发页面的刷新。

如果你需要在路由跳转后刷新页面，可以使用`forceRefresh`属性。将它设置为`true`，就可以在每次路由跳转时强制刷新页面。例如：

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

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

注意，使用`forceRefresh`属性会导致整个页面重新加载，这可能会造成性能上的影响。如果只是需要在路由切换时重新加载某个组件或执行一些操作，可以使用其他的方法，比如在`componentDidUpdate`生命周期方法中刷新数据。

两次跳转同一个路由组件页面不刷新

在 React Router 中，当你跳转到同一个路由时，默认情况下并不会触发组件的重新渲染。这是因为 React Router 对于同一个路由的切换只会改变 URL，而不会重新加载组件。如果你想要在同一个路由下刷新组件，可以考虑以下两种方法：

1. 使用 `forceUpdate` 方法强制刷新组件

你可以在组件中使用 `forceUpdate` 方法来强制刷新组件。这个方法会触发组件的 `render` 方法重新渲染，但并不会重新调用 `componentDidMount` 等生命周期方法。具体代码如下：

class MyComponent extends React.Component {
  handleClick = () => {
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>刷新</button>
        <p>组件内容</p>
      </div>
    );
  }
}

2. 使用 `key` 属性改变组件的标识

另一种方法是在同一个路由下改变组件的标识，从而触发组件的重新渲染。你可以在 `Route` 组件上使用 `key` 属性来改变组件的标识。具体代码如下：

class MyComponent extends React.Component {
  handleClick = () => {
    this.props.history.push('/path/to/same/component', { key: Date.now() });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>刷新</button>
        <p>组件内容</p>
      </div>
    );
  }
}

<Route path="/path/to/same/component" render={(props) => <MyComponent key={props.location.state.key} {...props} />} />

在点击按钮时，我们通过 `history.push` 方法改变了路由，并传入一个随机的 `key` 值。在 `Route` 组件上，我们使用 `render` 属性来渲染组件，并根据 `props.location.state.key` 的值来改变组件的标识。这样，每次路由改变时，组件的标识都会发生变化，从而触发组件的重新渲染。