/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

3 votes222 views4 answers
Add new array at the back of react state
Javascript React
8 votes294 views3 answers
Icon shwoing a box react native vector icons
Javascript React
0 vote304 views1 answer
React router remove location state on refresh
Javascript React
2 votes257 views2 answers
Chrome back button click event react
Javascript React
0 vote261 views1 answer
Render eror cant find variable: react
Javascript React
0 vote273 views1 answer
React native cors origin
Javascript React
0 vote251 views1 answer
React return value from component
Javascript React
105 votes261 views1 answer
React simbu2013
Javascript React
0 vote264 views1 answer
React native floating button
Javascript React
0 vote274 views1 answer
Plotly react
Javascript React