如何在 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 應用程式中，您可以將預設Router 替換為自訂Router router:

<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

在有資料路由器的RRDv6.4中，路由器物件直接公開「不穩定」導航功能：

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

const router = createBrowserRouter(...);

...

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

以上是如何在 React Router v6 中導航外部元件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！