/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 vote178 views2 answers
Capitalize each word from string in react
Javascript React
0 vote177 views1 answer
React native showing double header stack and drawer menu
Javascript React
0 vote196 views1 answer
V4 history for react action or api calls
Javascript React
0 vote185 views1 answer
Async wait for axios reactjs
Javascript React
0 vote214 views1 answer
Create react expo
Javascript React
18 votes190 views6 answers
React native release apk command
Javascript React
4 votes184 views1 answer
How to empty form after submit react
Javascript React
0 vote204 views1 answer
How to change currency in react-paypal-button-v2
Javascript React
0 vote197 views1 answer
React props change
Javascript React
3 votes190 views4 answers
React Redux Thunk
Javascript React