如何在 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 location="{state.location}" navigationtype="{state.action}" navigator="{history}"></router>
  );
};</code>

在您的應用程式中包含此自訂路由器並傳遞您的自訂歷史物件：

<code class="javascript">export default function App() {
  return (
    <customrouter history="{history}">
      <div classname="App">
        <routes>
          <route path="/" element="{<Home"></route>} />
          <route path="/profile" element="{<Profile"></route>} />
        </routes>
      </div>
    </customrouter>
  );
}</code>

更新：

更新：

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

React Router v6 提供了一個歷史記錄路由器，讓您可以傳遞自訂歷史記錄實例：

RRDv6.4 的註解：

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

const router = createBrowserRouter(...);

...

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

對於RRDv6.4和資料路由器，使用路由器導航功能在元件外部導航：

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