Pass values when doing a redirect, so these values are accessible in another file [duplicate]

If in Members.jsx I have

const showMembers = () => {
   const [state, setState] = useState('create');

   return (
     ...
     <Button href="/CreateMember" value={4} onClick={setState('edit')}>Edit</Button>
     ...
   )
}

Now when that button is clicked, I want to send (or see) the value and the state to another file called CreateMember.jsx, as seen in the href. So basically, when the button is clicked, redirect user to /CreateMember, with the value 4 and ‘edit’.

How can I do this?

In CreateMember.jsx, I have something like this

const CreateMember = () => {
  let state = state Recieved From The redirect
  const id = id Recieved From The redirect

  if(state === 'edit')
    fetch('/api/getMemberByID', {
            method: 'post',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({id: id})
        })
    }
   else { ... }
}

—————— Update ———————

I’m using Routes like below

import { BrowserRouter, Route, Routes } from 'react-router-dom';
function App() {  
  return (
    <>
      <Buttons />
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Content />}></Route>
          <Route path='/CreateMember' element={<Content />}></Route>         
          <Route path='*' element={<PageNotFound />}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

The Content just looks like this

const Content = () => {
    const URL = window.location.pathname.split('/')[1];
    const renderPage = (url) => {
        switch (url) {
            case 'CreateMember':
                return CreateMember()
            ...
            default:
                return PageNotFound()
        }
    }

    return (
        renderPage(URL)
    )
}