/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

2 votes165 views5 answers
How to import in react js
Javascript React
0 vote143 views1 answer
Remove unused dependencies React
Javascript React
5 votes201 views2 answers
Add object in array state react
Javascript React
0 vote131 views1 answer
React router dom default params
Javascript React
3 votes129 views3 answers
React hide source code
Javascript React
0 vote139 views1 answer
Radio button in react native expo
Javascript React
1 vote154 views1 answer
Java.lang.outofmemoryerror (no error message) react native
Javascript React
0 vote128 views2 answers
Add typescript to react-native
Javascript React
4 votes139 views2 answers
'Switch' is not exported from 'react-router-dom'.
Javascript React
0 vote127 views1 answer
React-bootstrap problem-install new version
Javascript React