What is the simplest way to pass state while using React Router?

Question

What is the simplest way to pass state while using React Router? My Navi component below is reflecting user being null, as opposed to user being "KungLoad". Thanks.

class App extends Component{
  constructor() {
    super();
    this.state = {user: "KungLoad"};
}
  render () {
    return(
    <div>
<Router> 
    <Route exact path="/" state  component = {Navi} />
  </Router>

Answer 1

1. After making the state and assigning value

   this.state = {user: "KungLoad"};
   

2. Passing the state value to the router is done like this.

   <Router> 
    <Route exact path="/" render={()=> (<Navi user={this.state.user}/>)}   />
   </Router>
   

3. Or if you want to user is not logged in use a redirect

   <Route exact path="/signin" render={()=> (<Redirect to='/signin'/>)}/>
   

Answer 2

Yiu can pass your state as props to your Navi component like this: <Route exact path="/" render={() => <Navi user={this.state.user} />} />

Answer 3

The simplest way is that you can pass the state as props and then use it in the specified component. For your case, you have to use render instead of component for passing the state as props.

<Route exact path="/" render={() => <Navi user={this.state.user} />}  />

This will work but I would recommend to you that the Context API concept of reactJS would be best suited here. You can pass the state or props to all the component using the data provider and all the components will consume the state or props that are being provided by the parent component. . https://reactjs.org/docs/context.html

Answer 4

The other answers are correct, you should pass state down to children components via props. I am adding my answer to highlight one additional way that the Route component can be used. The code looks cleaner and is easier to read if you simply add children to a Route component, rather than use the render or component prop.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      user: "KungLoad"
    };
  }

  render() {
    return (
      <div>
        <Router>
          <Route exact path="/">
            <Navi user={this.state.user} />
          </Route>
        </Router>
      </div>
    );
  }
}

Answer 5

version 6 react-router-dom

I know the question got answered but I feel this might be helpful example for those who want to use functional components and they are in search of passing data between components using react-router-dom v6.

Let's suppose we have two functional components, first component A, second component B. The component A wants to share data to component B.

usage of hooks: (useLocation,useNavigate)

---

import {Link, useNavigate} from 'react-router-dom';

function ComponentA(props) {

  const navigate = useNavigate();

  const toComponentB=()=>{
navigate('/componentB',{state:{id:1,name:'sabaoon'}});
  }

  return (
   <>
<div> <a onClick={()=>{toComponentB()}}>Component B<a/></div>
</>
  );


}


export default ComponentA;

---

Now we will get the data in Component B.

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

 function ComponentB() {

    const location = useLocation();
   
        return (

            <>
               
<div>{location.state.name}</div>

            </>
        )
    }

export default ComponentB;

Note: you can use HOC if you are using class components as hooks won't work in class components.