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

在 React Router v6 中导航外部组件

在 React Router v5 中，创建一个全局历史对象可以方便地在组件外部导航。然而，这种行为在 v6 中并没有立即显现出来。

使用自定义路由器自定义导航

一种方法是创建一个利用自定义历史对象并管理导航状态的自定义路由器。受到 v6 中 BrowserRouter 实现的启发：

<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>

通过将此自定义路由器与自定义历史对象结合使用，它可以有效地代理历史对象并管理导航状态。

交换路由器

在 React 应用程序中，您可以将默认路由器替换为自定义路由器：

<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-dom@6 引入了一个 '不稳定的 HistoryRouter，允许注入自定义历史库实例：

<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>

请注意，此 API 被标记为不稳定，可能需要进一步细化或依赖管理考虑。

RRDv6.4 with数据路由器

在带有数据路由器的 RRDv6.4 中，路由器对象直接公开“不稳定”导航功能：

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

const router = createBrowserRouter(...);

...

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

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