/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

15 votes215 views2 answers
React check if url address is valid
Javascript React
4 votes244 views2 answers
How to skip the undefined values from the list and filter the rest of the data in react js
Javascript React
1 vote230 views1 answer
React footer
Javascript React
1 vote242 views1 answer
React native basic template
Javascript React
13 votes243 views1 answer
React js vs jsx
Javascript React
5 votes239 views1 answer
Switch was not found in 'react-router-dom'
Javascript React
0 vote254 views1 answer
React function called last state
Javascript React
0 vote228 views1 answer
Jest mock react router params
Javascript React
-1 vote229 views4 answers
React tutorial
Javascript React
13 votes209 views10 answers
React navigation
Javascript React