How to pass props from one page using a Link(react-router) to a class component

Question

I have a Link in a page and I want it to pass the props to a route component which is a class component, how can I do that?? here is the code I have done so far:

the file where the Link is :

<List
    itemLayout="horizontal"
    dataSource={classes}
    renderItem={item => (
        <List.Item>
            <List.Item.Meta
                title = {
                    <Link 
                        to={{
                           pathname : "/Class",
                           state: {Name: item.Name}
                        }}
                        className="ListItem"
                    >
                        {item.Name}
                    </Link>
                 }
             />
         </List.Item>
       )}
/>

this is the index.js where I stored all the routes and I also have a context. Provider:

ReactDOM.render(
    <Provider store= {store}>
      <Router>
        <Layout>
          <Switch>
              <Route component={LandingPage} exact path="/" />
              <Route path="/dashboard" >
                <UserProvider>
                  <Dashboard/>
                </UserProvider>
              </Route>
              <Route path="/Class" >
                <UserProvider>
                  <Class/>
                </UserProvider>
              </Route>
              <Route component={NewMessage} path="/New-Message" />
              <Route path="/Inbox" >
                <UserProvider>
                  <Inbox/>
                </UserProvider>
              </Route>
              <Route path="/Outbox" >
                <UserProvider>
                  <Outbox/>
                </UserProvider>
              </Route>
              <Route component={ResetPassword} path="/reset-password" />
              <Route component={ResetPasswordConfirmed} path="/reset/password/confirm/:uid/:token" />
              <Route component={Signup} path="/signup" />
              <Route component={Activate} path="/activate/:uid/:token" />
            
          </Switch>
        </Layout>
      </Router>
    </Provider>,
  document.getElementById('root')
);

and this is the file that the link is pointing at (Class.js) :

class Class extends React.Component {
    
    static contextType = userContext
    
    state = {
        Curriculum: [],
        Classworks: [], 
        Homeworks: [],
        activeClass: ""
    }

    componentDidMount() {
        
        const { state } = props.location.state

        this.setState({
            activeClass: state
        });
        console.log(this.state.activeClass);        
      }

    render()
        {
            const { user_data, classes } = this.context
            return(
            <div className="back">
            <Navbar/>
            {this.state.activeClass}
            <main className= "MainContent">
                <div className="Class">
                    <h2 className="class">
                    </h2>
                </div>
            </main>
            <br/>
            <footer className="Footer">Designed by Eng. Omar Redwan</footer>
        </div>
        )}
}

export default Class;

Does this answer your question? [Pass props in Link react-router](https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router) — Mehdi Dehghani, Nov 18 '20 at 09:20
By pass props do you mean pass route state to a component? What is the issue? — Drew Reese, Nov 18 '20 at 09:28

akhtarvahid · Answer 1 · 2020-11-18T09:32:32.963

1

<Link 
  to={{
   pathname: "/Class",
   state: item.Name
  }}
   className="ListItem">
   {item.Name}
</Link>

and access like this in navigated component

componentDidMount() {
        const { state } = this.props.location;

        this.setState({
            activeClass: state
        }, ()=> {
         this.state.activeClass
       });
      }

Don't console state value immediately after setting to the state because it's asynchronous. If you want that console to check do as a callback to setState({...}, ()=> { console.log('check here') })

edited Nov 18 '20 at 09:32

answered Nov 18 '20 at 09:27

akhtarvahid

9,445
2
26
29

Thank you, your answer was very helpful – Omar Redwan Nov 18 '20 at 10:20

score 1 · Accepted Answer · answered Nov 18 '20 at 09:36

Issue

The Class component isn't directly rendered by a Route component so it doesn't receive the route props.

<Route path="/Class" >
  <UserProvider>
    <Class/>
  </UserProvider>
</Route>

Solution

Wrap the export of the Class component with the withRouter Higher Order Component so it has the route props injected to it.

export default withRouter(Class);

Now the Class component should be able to access route state via the location prop.

const { location: { state } } = this.props;

Side Note

You can't log react state right after an enqueued update as react state updates are asynchronously processed between render cycles, so you'll only ever see the current state from the current render cycle.

this.setState({
  activeClass: state
});
console.log(this.state.activeClass); // <-- current state!

Use the componentDidUpdate lifecycle method to log state/prop updates.

How to pass props from one page using a Link(react-router) to a class component

2 Answers2

Issue

Solution

Side Note