/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 vote219 views1 answer
Inline z-index react
Javascript React
15 votes224 views2 answers
React native get location
Javascript React
0 vote224 views1 answer
Detecting change in animated value react native
Javascript React
0 vote233 views1 answer
React-drag-drop-files open twice
Javascript React
25 votes228 views5 answers
Image react
Javascript React
0 vote222 views1 answer
Using RN BootSplash with React Navigation
Javascript React
7 votes262 views3 answers
How to route react from laravel
Javascript React
15 votes222 views1 answer
Reducer in react example
Javascript React
114 votes239 views3 answers
React init
Javascript React
0 vote221 views1 answer
Fetch data from asyncstorage react native
Javascript React