/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 vote223 views1 answer
Component navigation without changin the url react router
Javascript React
5 votes206 views1 answer
React native backgrunde img
Javascript React
0 vote318 views1 answer
React router nested routes active
Javascript React
0 vote213 views1 answer
React convert table to pdf
Javascript React
15 votes205 views5 answers
React svg
Javascript React
23 votes206 views6 answers
React native shadow
Javascript React
0 vote215 views1 answer
React antd form disable submit button
Javascript React
5 votes160 views1 answer
Add icon material ui
Javascript React
0 vote195 views1 answer
Make 2div in row react js
Javascript React
0 vote188 views1 answer
Native module reactnativepushnotification tried to override rnpushnotification
Javascript React