Navigation

The navigation of the project has been accomplished with React Router which is a client and server-side routing library for React, a JS library for building user interfaces.

Note

React Router is only compatible with versions higher than 16.8, so make sure that your React version comply with it.

The routes for the navigation are implemented in /ui/src/index.tsx. These routes have a purpose to lead us to separate URLs of our website, like the main page, the detail page of a lecture, the search results and the page that displays the members of the ATC.

First of all, the BrowserRouter (which connects our app to the browser's URL), Routes and Route have to be imported from "react-router-dom".

import { BrowserRouter, Routes, Route } from "react-router-dom";

Now some routes are added and defined the following way:

render(
  <BrowserRouter>
    <Routes>

      // Main page
      <Route path="/" element={<App />} />

      // Search results
      <Route path="search" element={<Results />} />

      // ATC members
      <Route path="about-us" element={<AboutUs />} />

      // Collection of lectures
      <Route path="lectures" element={<Lectures />}>
        <Route
          index
          element={
            <main style={{ padding: "1rem" }}>
              <p>Select a lecture</p>
            </main>
          }
        />
      </Route>

      // Detail page of a lecture
      <Route path="lectures/:lectureId" element={<Lecture />} />

      // Blank page in case of a route that has no endpoint (it leads nowhere)
      <Route
        path="*"
        element={
          <main style={{ padding: "1rem" }}>
            <p>There's nothing here!</p>
          </main>
        }
      />
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

In order to instruct the React Router to render our app at different URLs, we need to create our route configuration by having the Routes, Route imported, and the pages that should be rendered. For example the detail page for a lecture in /ui/src/index.tsx:

import Lecture from "./routes/lecture";

Import your new page in /ui/src/index.tsx, like the example above.

Add a new Route within the tree of Routes and BrowserRouter.

<Route path="{*the path of your new page*}" element={*the name of your new page*} />

Import Outlet from "react-router-dom" in your new page (you can find the current ones implemented under the folder /ui/src/routes/). It is recommended to keep your new page under this folder.
```
import { Outlet } from "react-router-dom";
```
Add <Outlet /> in the code of your new page.

Note

Make sure that a link is visible for the user to access the new URL.

Navigation

How to add a new URL to the navigation