Pass props through route

Question

In react how can I configure a route to pass props. for example my route.tsx is:

export const routes = () => (
  <Layout>
    <Route exact path='/' component={ Home } />
    <Route path='/counter' component={ Counter } />
    <Route path='/fetchdata' component={ FetchData } />
  </Layout>
);

How can I pass some data as props to my Counter component when ever /counter is evoked

Answer 1

You can use the render prop.

  <Route 
     path='/counter' 
     render={(props) => (
       <Counter {...props} count={5} />
     )} 
  />

Answer 2

This will do the work: Render

    <Route
      path='/dashboard'
      render={(props) => <Dashboard {...props} isAuthed={true} />}
    />

Hope this helps!