/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 vote103 views1 answer
How to link t settings react native ios
Javascript React
0 vote110 views1 answer
How to link to a different component in reactjs without react router
Javascript React
0 vote102 views1 answer
Error while updating linecap of a view polyline react-native-maps
Javascript React
0 vote106 views1 answer
ExoPlayer with auto linking react native
Javascript React
1 vote109 views1 answer
How to store array into react-native local storage
Javascript React
7 votes114 views2 answers
React router 6 redirect
Javascript React
0 vote105 views1 answer
Find 401 error and logout axios in react
Javascript React
7 votes107 views2 answers
React native rename
Javascript React
0 vote144 views1 answer
React native init specific version
Javascript React
1 vote114 views1 answer
React js console log not working
Javascript React