Есть ли способ передавать информацию между страницами в Reactjs с помощью navlink?

Я использую REST-фреймворк Django, храня данные в модели.

Затем я использую Reactjs для потребления API и выполнения GET/POST запросов.

Я хочу иметь возможность щелкнуть на определенной ссылке, но затем также передать информацию компоненту, на который направлена ссылка.

Это мой код index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

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

Это мой код App.js

import './App.css';
import Container from '@material-ui/core/Container';
import Navigation from './Components/ToolBar'
import Main from './Components/Main'

function App() {

  return (
    <>
      <Container maxWidth='lg' className="App">
        <Navigation/>
        <Main/>
      </Container>
    </>
  )
}

export default App;

Это мой код Main.js

import { Switch, Route } from 'react-router-dom';
import Projects from './Projects';
import Tickets from './Tickets';

const Main = () => (
    <Switch>
      <Route exact path='/projects' component={Projects}></Route>
      <Route exact path='/tickets' component={Tickets}></Route>
    </Switch>
  );

  export default Main;

Это мой код Toolbar.js, который используется для навигации по различным страницам

import { Button } from '@material-ui/core'
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import { NavLink } from 'react-router-dom'

const Navigation = () => {

    return (
        <AppBar color='primary'>
            <Toolbar>
                <Button><NavLink to='/projects'>Projects</NavLink></Button>
                <Button><NavLink to='/tickets'>All Tickets</NavLink></Button>
            </Toolbar>
        </AppBar>
    )
}


export default Navigation

А это мой код Projects.js

import React, { useState, useEffect} from 'react'

function Projects() {

  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('http://localhost:8000/api/projects/')
      .then(res => res.json())
      .then(setData)
      .catch(console.error);
  }, []);

  if (data) {
    const projects = [...new Set(data.map(item => item.project_code))];

    return (

        <div>
          <h3>These are the current projects</h3>
            {projects.map(item => (
              <p>{item}</p>
            ))}
        </div>
    );
  }
  return null;
}

export default Projects;

В основном я хочу добиться следующего: в коде Project.js строку <p>{item}</p> я хочу изменить на кликабельную ссылку. Когда эта ссылка нажимается, она должна перенести меня на новую страницу, где показаны все тикеты, только связанные с этим конкретным проектом, и она должна использовать переменную project_code (для этого конкретного проекта) для отправки запроса к API. После того, как API получит код проекта, он отправит обратно только билеты для этого конкретного проекта.

Моя проблема заключается в передаче этого project_code со "страницы" Projects на новую страницу, где я могу использовать этот project_code для отправки его в API

   /project/:projectId // for your project main route
   /project/:projectId/:ticketId // to access a particular ticket