Wie navigiere ich außerhalb von Komponenten in React Router v6?

React Router v6: Navigieren außerhalb von Komponenten

React Router v6 führt Änderungen in der Art und Weise ein, wie Verlaufsobjekte behandelt werden. Während Sie in Version 5 ein gemeinsames Verlaufsobjekt erstellen und an den Router übergeben können, erfordert Version 6 einen anderen Ansatz.

Problem:

Wie können Sie von außen navigieren? Komponenten in React Router v6, ähnlich dem Verhalten in v5?

Lösung:

Um das vorherige Verhalten zu reproduzieren, können Sie einen benutzerdefinierten Router erstellen, der den Verlaufsstatus instanziiert wie in RRDv6-Routern gemacht:

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

Fügen Sie diesen benutzerdefinierten Router in Ihre Anwendung ein und übergeben Sie Ihr benutzerdefiniertes Verlaufsobjekt:

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

Update:

React Router v6 zeigt einen Verlaufsrouter an, sodass Sie eine benutzerdefinierte Verlaufsinstanz übergeben können:

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

Hinweise für RRDv6.4:

Für RRDv6.4 und Datenrouter, navigieren Sie mit der Router-Navigationsfunktion außerhalb von Komponenten:

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

const router = createBrowserRouter(...);

...

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

Das obige ist der detaillierte Inhalt vonWie navigiere ich außerhalb von Komponenten in React Router v6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!