0

I've currently changed my routing around a bit to support certain routes having different, arbitrary layouts. The scheme works on all views other than when I need to pass a value via route to the component. For example, I have the following route defined:

function renderWithLayout(Component, Layout) {
    return <Layout><Component /></Layout>
}

export default class App extends Component {
    displayName = App.name;
    render() {
        <ApolloProvider client={client}>
              <Route 
              path="/articles/view/:id"
              render={() => renderWithLayout(ArticlesView, PublicLayout)}
              exact={true}
              />
        </ApolloProvider>
    }
}

then in my ArticlesView component, I am attempting to grab the id passed to the route as follows in the render() method:

const { match: params } = this.props;
console.log(params); //this is undefined
var id = params.id; //TypeError: Cannot read property 'id' of undefined

before I changed the routing around, I could just do const { id } = this.props.match.params;

how can I overcome this issue?

EDIT: before the routing change, I had the route defined as:

<Route 
    path="/articles/view/:id"
    component={ArticlesView}
    exact={true}
    />
P Varga
  • 19,174
  • 12
  • 70
  • 108
GregH
  • 5,125
  • 8
  • 55
  • 109
  • 1
    You need to spread the route props. `render={(props) => renderWithLayout(ArticlesView, PublicLayout, props)}` and then `function renderWithLayout(Component, Layout, props) { return }` – Andrew Li Feb 22 '19 at 14:11
  • that works thanks. If you'd like to elaborate on this answer (particulary the `...props` part) and post as an answer I'll gladly accept. – GregH Feb 22 '19 at 14:15
  • 2
    See https://stackoverflow.com/q/31048953 - Basically React Router exposes the props you want as an argument. To pass that down to your route component, you need to explicitly pass it down and spread them. – Andrew Li Feb 22 '19 at 14:17
  • @GregH you can also use `withRouter(ArticlesView)` HOC provided by react-router. – Murli Prajapati Feb 23 '19 at 09:08

0 Answers0