/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

35 votes374 views6 answers
Create react app with tailwind
Javascript React
-1 vote377 views2 answers
For loop in react native
Javascript React
0 vote360 views1 answer
ERROR TypeError: undefined is not an object (evaluating '_reactNative.Styles.m aincont')
Javascript React
17 votes348 views5 answers
Add background image react native
Javascript React
15 votes342 views1 answer
Did you mean to use React.forwardRef()?
Javascript React
12 votes373 views3 answers
Get value of input react
Javascript React
1 vote336 views1 answer
React native image border radius not working
Javascript React
0 vote386 views1 answer
How to resolve click for div logging as parent too, in react
Javascript React
0 vote378 views1 answer
Reactjs ES6 class event listeners in jsx
Javascript React
1 vote387 views2 answers
React native get timezone
Javascript React