/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 vote178 views1 answer
Open xcode shorthand react native
Javascript React
0 vote217 views1 answer
How to reset ReactJS file input
Javascript React
0 vote209 views1 answer
React redux stack overflow
Javascript React
10 votes232 views1 answer
Dimensions react native
Javascript React
0 vote212 views1 answer
React native 'UMConstantsInterface/UMConstantsInterface.h' file not found
Javascript React
0 vote203 views1 answer
React native whatsapp integration
Javascript React
63 votes193 views6 answers
React router install
Javascript React
1 vote216 views1 answer
React native remove text from string
Javascript React
1 vote207 views1 answer
Shopping cart small icon code react-bootstrap 4.6 fa fas
Javascript React
7 votes215 views3 answers
React route props
Javascript React