What is the best solution to pass data between componenets in React

user_15388111 0
Viewed 32

This is my App.js:

    function App() {
  return (
    <BrowserRouter>
      <div>
        <Routes>
            <Route path="/" exact element={<Home />} />
            <Route path="/creation" element={<Creation />} />
            <Route path="/payment" element={<Payment />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

I need to pass a string generated in the "Creation page" to the "Payment page."

Meanwhile, once the string is generated on the creation page, the user should be automatically directed to the payment page. ( I have a solution for this: useNavigate( ) ).

Does anyone know what is the best solution to reach this goal?

I appreciate any help you can provide.

reactjs components
1 Answers

In React Router v6 you can pass parameters to the url your navigating to

navigate(`/payment/${yourString}`);

then in payments:

import { useParams, useNavigate } from "react-router-dom";
    
const params = useParams();

then you can access your string with params.yourString.

user_198529570
Related