Formatowanie adresów URL i Routing React — przewodnik po użyciu React Router

W aplikacji React formatowanie adresów URL routing odgrywa kluczową rolę w poruszaniu się po stronach i wyświetlaniu odpowiedniej treści. Do zarządzania routing w React możemy wykorzystać bibliotekę. Oto podstawowy przewodnik dotyczący formatowania adresów URL i obsługi w aplikacji React. React Router React Router routing

zainstalować React Router

Otwórz katalog projektu w terminalu i uruchom następujące polecenie, aby zainstalować: React Router npm install react-router-dom

Zaimportuj niezbędne komponenty z do swojego komponentu React. React Router

Zdefiniuj trasy

Użyj komponentu do opakowania aplikacji React i ustawienia podstawowego formatu adresu URL. <BrowserRouter>

Użyj <Route> komponentu do zdefiniowania tras w swojej aplikacji.

Przykład:

import { BrowserRouter, Route } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Route exact path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/products" component={Products} />  
    </BrowserRouter>  
 );  
}  

Zdefiniuj Link s

Użyj komponentu do tworzenia nawigacji w swojej aplikacji. <Link> link

Przykład:

import { Link } from 'react-router-dom';  
  
function Navigation() {  
  return( 
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/products">Products</Link>  
        </li>  
      </ul>  
    </nav>  
 );  
}  

Parametry ścieżki dostępu

Użyj <Route> komponentu z path atrybutem w formacie, /users/:id aby uzyskać dostęp do parametrów ścieżki.

W komponencie zdefiniowanym przez <Route>, możesz użyć useParams(), aby uzyskać dostęp do wartości parametrów ścieżki.

Przykład:

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}  

Użyj Switch i Redirect

Użyj komponentu, aby renderować tylko pierwszą trasę pasującą do ścieżki. <Switch>

Użyj komponentu do użytkowników z jednej określonej ścieżki do drugiej. <Redirect> redirect

Przykład:

import { Switch, Route, Redirect } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/products" component={Products} />  
        <Redirect to="/" />  
      </Switch>  
    </BrowserRouter>  
 );  
}  

Oto kilka podstawowych pojęć związanych z formatowaniem adresów URL oraz routing w React przy użyciu. Korzystając z, możesz tworzyć elastyczne aplikacje React z możliwością nawigacji i wyświetlania różnych treści na podstawie adresu URL. React Router React Router