/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 vote196 views1 answer
React native carriage return
Javascript React
0 vote209 views3 answers
Proptypes for a react component
Javascript React
0 vote183 views1 answer
Type '{ GlobalState: any; Dispatch: React.Dispatch<any>; }' is not assignable to type 'null'
Javascript React
0 vote197 views1 answer
Using redux on react extension
Javascript React
0 vote187 views1 answer
React form input not working
Javascript React
0 vote200 views1 answer
Uploading profile pic with react.js node.js express.js REST API to sqlite DB
Javascript React
0 vote192 views1 answer
Take string until react
Javascript React
0 vote208 views1 answer
Bot react message with custom emoji
Javascript React
0 vote180 views2 answers
Airbnb and eslint react native
Javascript React
1 vote197 views2 answers
How to prevent render in react
Javascript React