We Keep Coding

SOLVED: Pass data between pages in mern stack

So i have a mern project. The dashboard page on my website is fetching "project" documents from the db and using the map() function displaying the data and an open project button. When a user presses on one of those "open project" buttons, i want to redirect them to another page. Which will display the tickets that have the same id as the project relative to the button the user pressed. But for that, in the new page. I need to know on which project they pressed the button. How do i do that. I can think of a few possible solutions:
Using react context to make a global variable, on which project they pressed. But that feels super weird and could be a security breach.
making a page for every "project" document in the database. But i dont know how and if it´s possible since i cant sit and manually create all those pages.
All help is very appreciated, thank you!:)
I haven´t tried any solutions yet, cause i feel like .1 just wont do the job smoothly. and i dont know how to do .2

How to set up onClick functionality with react to an external website

So I've been setting up my portfolio, as a jr fullstack web developer. I've ran into a little trouble with react and an onClick link to an external website(my github.) I've got a card where I've passed it a {link} prop, or atleast I think that's how I've set it up lol. The goal is to set up my card to where when you click on it, it takes you to my github / hosted projects. Any advice/ guidance is greatly appreciated.
This is my card where I want to be able to click and redirect users to my github / hosted projects
This is where I've set up my {link} prop
This is my list of projects where I map through the array and display my cards

history.push is slow to reload page when adding a new record

I'm pretty new to react and redux so this may be a silly question but I'll ask anyway as its driving me nuts and I want to fix it:
I have a LIST page which shows a list of records from Firebase Firestore. I'm loading that list as a connected state object using react-redux-firestore. Loading of the page with about 325 records in the Firestore database takes about 1.5 seconds. I could implement paging or similar as there will be some tables with even more records but for now this is what I have.
On the LIST page, I have a button which does a history.push to a NEWRECORD page where a user can enter values into a form and click SAVE. When SAVE is clicked, the add record (redux) action is called and the record is saved to Firebase. All of this works fine - no issues thus far. The problem comes to view in the next step. After the save, the same click handler then does a history.push back to the LIST page. The browser does redirect to the page, the newly created record is shown immediately but it takes 8-10 seconds to render the rest of the records. This is super annoying and makes it appear that all records have somehow been deleted for a few seconds.
So I'd love for someone to explain why a re-rendering takes longer than the initial loading and how to improve things which I'm sure must be possible.
Thanks

I think the rest of the records will be coming from Firebase directly and not coming from redux store ? I'm not sure .
Or If thats not the case try to enclose rest of the records in if() and then check .

React Rendering different Children Components on button click

chatbox
profile view
So these are mockups for my social network project.
My question is that when a user logs in he is presented with this view.
There are two parent components THE LEFT PANE and RIGHT PANE.
THE LEFT PANE remains there for the whole session. BUT inside right pane I have to render
Chat box(when someone clicks on a friend from the list).
Pending request Component(When the see pending request button is
clicked)
Search Friends(When make friends button is clicked)
Profile View (When someone clicks on the interactive I button
Priorities:
I do not want to show the change in the address bar when any
component changes. So cannot use Browser Router.
Possible Solution but in doubt
I could use Conditional rendering by attaching some state variable
with each button click and when that button is clicked determining
the state i should render that specific component.
I could use Memory Router in react router in order to keep the code
clean and do not show the change in the address bar.
Help
CAN ANYONE WITH A GOOD EXPERIENCE IN REACT TELL ME IS THERE ANY OTHER WAY OF DOING THIS? AND IF NOT THEN WHICH IS A BETTER OPTION BETWEEN THESE TWO?
Pls refer to the images to get full idea about the situation.
thanks.
P.S. I can only post two links the other two components of pending request and make friends would be loaded the same way inside the right pane.

I think the best way would be to use the memory router Coz it would help to keep your code neat and understandable for reusability

Navigation in a single page app with react.js

I'm building a single page application with React and Backbone and am trying to figure out best practices for handling navigation between content in the app. My app will have a sidebar with links, for example, to "photos" and "settings". The sidebar is always present, so upon clicking "settings" I want the settings component to be rendered without the entire page reloading. Slack is a great example of what I'm looking for, where clicking a different channel switches the conversation content, but does not reload the entire page.
I had a few ideas on how to implement this, but i'm not sure what's best:
Have a general react component (console.jsx) that accepts a urlparameter as a prop to determine which content (photos or settings) to render.
or 2. have a general react component and define a state variable that represents which content to render.
Any help would be greatly appreciated!

Have you heard about react router? Seems to be what you want.
react router