/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

139 votes505 views2 answers
React js installation steps
Javascript React
0 vote383 views1 answer
Run react app in different port
Javascript React
0 vote369 views1 answer
React native flexbox 2 columns 1 fixed width
Javascript React
1 vote405 views3 answers
React native port
Javascript React
1 vote375 views1 answer
How to create round image in react native
Javascript React
142 votes543 views6 answers
Create-react-app
Javascript React
1 vote368 views1 answer
New line in p tag react
Javascript React
0 vote377 views1 answer
How to add autoserial number in react js
Javascript React
0 vote392 views1 answer
Websocket with Node and React
Javascript React
-2 votes387 views2 answers
Search bar in react js material ui
Javascript React