/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

-1 vote212 views1 answer
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
Javascript React
2 votes190 views1 answer
How to add multiple style attributes in react element
Javascript React
0 vote198 views1 answer
Duplicate module name: React Native hasteimpl react native android
Javascript React
0 vote202 views1 answer
Scroll load react
Javascript React
0 vote195 views2 answers
React native bottom sheet example
Javascript React
0 vote189 views2 answers
React native view background transparency
Javascript React
0 vote217 views2 answers
How to run react builed version
Javascript React
3 votes216 views2 answers
How to know the current route in react class component
Javascript React
131 votes690 views6 answers
Creating react app
Javascript React
1 vote174 views2 answers
React native get timezone
Javascript React