Wie navigiere ich durch externe Komponenten in React Router v6?

Navigieren außerhalb von Komponenten in React Router v6

In React Router v5 ermöglichte die Erstellung eines globalen Verlaufsobjekts eine bequeme Navigation außerhalb von Komponenten. Dieses Verhalten ist jedoch in Version 6 nicht sofort erkennbar.

Anpassen der Navigation mit einem benutzerdefinierten Router

Ein Ansatz besteht darin, einen benutzerdefinierten Router zu erstellen, der ein benutzerdefiniertes Verlaufsobjekt verwendet und den Navigationsstatus verwaltet. Inspiriert durch die Implementierung von BrowserRouter in Version 6:

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

Durch die Verwendung dieses benutzerdefinierten Routers mit einem benutzerdefinierten Verlaufsobjekt wird das Verlaufsobjekt effektiv als Proxy weitergeleitet und der Navigationsstatus verwaltet.

Router austauschen

Innerhalb der React-Anwendung können Sie dann den Standard-Router gegen den benutzerdefinierten Router austauschen:

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

Unstable History Router

react-router-dom@6 hat ein „ instabiler‘ HistoryRouter, der die Injektion einer benutzerdefinierten Verlaufsbibliotheksinstanz ermöglicht:

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

Beachten Sie, dass diese API als instabil gekennzeichnet ist und möglicherweise weitere Verfeinerungen oder Überlegungen zur Abhängigkeitsverwaltung erfordert.

RRDv6.4 mit Datenrouter

In RRDv6.4 mit Datenroutern wird eine „instabile“ Navigationsfunktion direkt durch das Routerobjekt verfügbar gemacht:

<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 durch externe Komponenten in React Router v6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!