JAVASCRIPT

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'}

send data through routes in react

const navigate = useNavigate();
navigate('/other-page', { state: { id: 7, color: 'green' } });

send data through routes in react

const {state} = useLocation();
const { id, color } = state; // Read values passed on state

passing data in route react

<Route path="/" component={() => <Search name={this.props.name} />} /> 

pass data between router components

import {useLocation} from 'react-router-dom';

const Register=()=>{

const location = useLocation()

//store the state in a variable if you want 
//location.state then the property or object you want

const Name = location.state.name

return(
  <div>
    hello my name is {Name}
  </div>
)

}

pass data between router components

<Link to='register' state={{name:'zayne'}}>

passing data in route react

<Route path="/:name" component={Search} />

passing data in route react

<Route path="/" render={() => <Search name={this.props.name} />} /> 

passing data in route react

render={routeProps => <Search name={this.props.name} {...routeProps} />}