/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

4 votes368 views1 answer
How to use font awewsome in react app
Javascript React
0 vote350 views1 answer
Making font weight bold by passing value in React.js
Javascript React
105 votes402 views1 answer
React simbu
Javascript React
9 votes352 views1 answer
Create react app in current folder
Javascript React
0 vote392 views2 answers
Sending props via navigate() of react router v6
Javascript React
0 vote348 views1 answer
React open a link to an outside siite
Javascript React
6 votes354 views2 answers
React native indicator
Javascript React
6 votes360 views3 answers
React native vector icons not showing
Javascript React
0 vote374 views1 answer
React load script after render
Javascript React
32 votes376 views1 answer
React router command
Javascript React