/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 vote129 views1 answer
Dispatch event not working react native redux
Javascript React
0 vote248 views1 answer
Canvas js in react
Javascript React
4 votes98 views1 answer
Use of useNavigate from 'react-router-dom'
Javascript React
24 votes132 views3 answers
Set port in react app
Javascript React
3 votes126 views1 answer
React is front end or backend
Javascript React
1 vote112 views1 answer
Horizontal scroll onclick react
Javascript React
-2 votes124 views1 answer
How to identify debug and release build in react native
Javascript React
2 votes126 views1 answer
React add gradient top to bottom
Javascript React
15 votes125 views8 answers
React bootstrap
Javascript React
0 vote109 views1 answer
Como hacer un onpress en react native expo
Javascript React