/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 vote152 views5 answers
React buttons npm
Javascript React
262 votes343 views6 answers
Create a react native project
Javascript React
1 vote164 views1 answer
Lazy loading pagination react npm
Javascript React
1 vote150 views1 answer
How to check if bottom tab is active in react native material bottom tab
Javascript React
0 vote148 views1 answer
Bootstrap modal disable close on click outside react bootstrap
Javascript React
0 vote145 views1 answer
Dynamic for loop react
Javascript React
5 votes161 views5 answers
Onclick react
Javascript React
4 votes172 views2 answers
React helmet
Javascript React
0 vote142 views1 answer
Format react code in visual studio code
Javascript React
0 vote157 views1 answer
Unrecognized font family fontawesome react native ios
Javascript React