/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

26 votes124 views4 answers
React context
Javascript React
1 vote166 views1 answer
React native detect swipe
Javascript React
0 vote173 views1 answer
Filter based on input typing react
Javascript React
-1 vote184 views3 answers
Why we import react from react
Javascript React
0 vote152 views1 answer
React js averta fonts not working in safari staging deployement
Javascript React
0 vote176 views1 answer
How to redirect a form to another page when we submitted a form in react js
Javascript React
0 vote178 views3 answers
Line 32:18: 'Link' is not defined react/jsx-no-undef
Javascript React
0 vote205 views2 answers
Loop through array react native
Javascript React
0 vote165 views1 answer
React native whatsapp integration
Javascript React
0 vote170 views1 answer
React-with-firebase-auth
Javascript React