/Javascript/React/How to pass data between routes in react

How to pass data between routes in react

Passing data in route react

<Route path="/" render={() => <Search name={this.props.name} />} />

Passing data in route react

<Route path="/" component={() => <Search name={this.props.name} />} />

Source: stackoverflow.com

How to pass data between routes in react

// React Router v6
// pass data between routes
// ---------------------------------------------------------------------
// sender.js/jsx
import { useNavigate } from "react-router-dom";

const navigate = useNavigate();
navigate('/other-page', { state: { username: 'user', password: '696' } });
// ---------------------------------------------------------------------
// receiver.js/jsx
import { useLocation } from "react-router-dom";

const location = useLocation();
console.log(location.state) // gives: {username: 'user', password: '696'}

Passing data in route react

render={routeProps => <Search name={this.props.name} {...routeProps} />}

Source: stackoverflow.com

Similar codes

0 vote363 views1 answer
Cannot find module react scripts
Javascript React
2 votes379 views2 answers
How to add multiple classes to a ReactJS Component
Javascript React
0 vote389 views1 answer
Fcctest cdn reactjs setup
Javascript React
0 vote379 views1 answer
TrackPromise React
Javascript React
0 vote401 views1 answer
React native portrait only
Javascript React
1 vote397 views1 answer
Android resource linking failed react native image crop picker
Javascript React
-1 vote372 views1 answer
Timestamp to unix time react
Javascript React
22 votes405 views4 answers
Reactjs copytoclipboard box
Javascript React
2 votes392 views2 answers
How to send form data from react to express
Javascript React
0 vote410 views1 answer
Header logo react native img
Javascript React