如何在 React Router v6 中的组件之外导航？

React Router v6：在组件外部导航

React Router v6 引入了处理历史对象方式的变化。在 v5 中，您可以创建一个共享历史对象并将其传递给 Router，v6 需要不同的方法。

问题：

如何从外部导航React Router v6 中的组件，与 v5 中的行为类似？

解决方案：

要复制以前的行为，您可以创建一个实例化历史状态的自定义路由器如 RRDv6 路由器中所做的那样：

<code class="javascript">const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};</code>

在您的应用程序中包含此自定义路由器并传递您的自定义历史对象：

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
    </CustomRouter>
  );
}</code>

更新：

React Router v6 提供了历史记录路由器，允许您传递自定义历史记录实例：

<code class="javascript">import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* The rest of your app goes here */}
  </HistoryRouter>,
  root
);</code>

RRDv6.4 的注释：

对于 RRDv6.4和数据路由器，使用路由器导航功能在组件外部导航：

<code class="javascript">import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(...);

...

router.navigate(targetPath, options);</code>

以上是如何在 React Router v6 中的组件之外导航？的详细内容。更多信息请关注PHP中文网其他相关文章！