[FIXED] Is there a way to pass information between pages in Reactjs using navlink?

Issue

I am using a Django REST framework, storing data in a model.

I am then using Reactjs to consume the API and make GET/POST requests.

Inside the React frontend, I am using react-router-dom to navigate between pages.

I want to be able to click on a specific link, but then also pass on information to the component towards which the link is routed.

This is my index.js code

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')
);

This is my App.js code

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;

This is my Main.js code

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;

This is my Toolbar.js code, which is used for navigating to different pages

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

And this is my Projects.js code

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;

Basically what I want to achieve is the following, in my Project.js code, the line item <p>{item}</p>, I want to change to a clickable link. When this link is clicked, it needs to take my to a new page, where all the tickets are shown, only related to that specific project, and it needs to use the project_code variable (for that specific project) to send a request to the API. After the API receives that project code, it will send back only the tickets for that specific project.

My problem is passing that project_code from the Projects "page" to a new page, where I can use that project_code to send it to the API

Solution

In your particular case, I think nested routes would be the best option. Check out this example to see how you could add it to your logic.

By doing so, you'll end up with routes looking like this:

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

This will also allow you to display some kind of Menu, where you can see all your projects/tickets, and freely navigate through them all.

Answered By - Pierre Olivier Tran