/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 vote129 views2 answers
React check internet connection
Javascript React
0 vote135 views1 answer
Override backswipe behaviour in ios and android react native
Javascript React
0 vote174 views1 answer
React native carriage return
Javascript React
8 votes137 views2 answers
Set value as object in react hooks
Javascript React
1 vote159 views1 answer
How to check if url has hash in react
Javascript React
1 vote147 views1 answer
Module not found reactstrap
Javascript React
0 vote141 views1 answer
Assign random colors react chartjs
Javascript React
3 votes197 views3 answers
How to uninstall react native cli globally
Javascript React
0 vote139 views1 answer
Unable to resolve module `@react-native-community/toolbar-android
Javascript React
0 vote149 views1 answer
React does not send the cookie automatically
Javascript React