/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 vote402 views1 answer
React overflow scroll
Javascript React
3 votes308 views2 answers
React navigation header transparent
Javascript React
0 vote457 views1 answer
Show uploaded image in react/nextjs
Javascript React
0 vote382 views1 answer
2.When will the validation functions be called in the react js
Javascript React
0 vote428 views1 answer
How to Submit Forms and Save Data with React.js
Javascript React
2 votes399 views2 answers
React native scrollview map
Javascript React
0 vote340 views1 answer
Option component in react js errors
Javascript React
4 votes407 views2 answers
How to use react-native-vector-icons
Javascript React
6 votes437 views1 answer
React native activityindicator
Javascript React
1 vote391 views1 answer
Update create react app package to latest
Javascript React