ReactJS - tworzenie struktury url

W tym artykule po krótce opiszemy co należy zrobić aby nasza aplikacja miała więcej niż jedną stronę czyli więcej niż jeden URL :-)
Język React posiada bibliotekę  "react-router-dom", która odpowiada za routing w aplikacji . W praktyce jest to proste, spróbujmy użyć tej biblioteki.

Instalacja biblioteki react-router-dom:

npm install react-router-dom

Spójrzmy na obecną implementację pliku index.js, który odpowiada za wyrenderowanie głównego komponentu wewnątrz elementu DOM :

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

W tym pliku głównym renderowanym komponentem jest /App. To co musimy zrobić należy zaimportować bibliotekę react-router-dom oraz zmienić kod ReactDOM.render aby użyć routingu.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './index.css';
import App from './App';
import About from './components/about';
import Home from './components/home';


const root = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
    </div>
  </Router>
);

ReactDOM.render(<App />, document.getElementById("root"));

Stwórzmy teraz nową stronę About , w tym celu tworzymy nowy  komponent 
 

// plik About.js
import React from "react";

const About = () => {
  return <div>O naszym serwisie</div>;
};

export default About;

Stwórzmy też stronę główną jako komponent

import React from "react";

const Home = () => {
  return (
    <div>
      <h1>Strona główna</h1>
    </div>
  );
};

export default Home;

Dodajemy ścieżkę do naszego komponentu w pliku głównym aplikacji oraz routing do komponentu :
 

import Home from "./components/home";
import About from "./components/about";

function App() {
  return (
    <Router>
    <div className="App">
 
     <Routes>
            <Route exact path="/" element={<Home/>} />
            <Route exact path="/about" element={<About/>} />
      </Routes>
    </div>
    </Router>
  );
}

Ostatnim elementem tego przykładu będzie dodanie linków do stron. W tym celu użyjemy elementu <Link/>
Należy w plikach komponentów dodać odpowiednio :
 

<Link to="/">Home</Link>
oraz
<Link to="/about">About</Link>

Na koniec , należy pamiętać że w przypadku nie działania czegoś w naszej aplikacji należy na bieżąco sprawdzać czy występują błędy w konsoli przeglądarki.