React server not starting - something with renderProps

Question

I have a React application and here is my server code:

app.get('*', (req, res) => { let history = createMemoryHistory(); let store = configureStore(); let routes = createRoutes(history); match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { if (redirectLocation) { res.redirect(301, redirectLocation.pathname + redirectLocation.search); } else if (error) { res.status(500).send(error.message); } else if (renderProps == null) { res.status(404).send('Not found'); } else { let { query, params } = renderProps; let comp = renderProps.components[renderProps.components.length - 1]; console.log('fetching'); comp.fetchData({ store, params }) .then(() => { console.log('done fetching'); let html = ReactDOMServer.renderToString( <Provider store={store}> { <RouterContext {...renderProps}/> } </Provider> ); const template = store.getState().template; const og = templateToOpenGraph(template); const full = wrap(html, store.getState(), og); res.set({ 'Cache-Control': 'public, max-age=300' }) res.send(full); }) } }); }) 

When I start the server, it starts just fine. But when I find a route (any route), I get an error: TypeError: comp.fetchData is not a function

What do I need to do? I’m not the best, I react, so if I am missing something obvious, please let me know.

Thanks!

Answer 1

Your component must have a fetchData method.

I do not have a route configuration, but for example you have something similar in your routes.js file

<Route path="/" component={Root}> <Route path="view/:id" component={View} /> ... </Route>

When you load the http://example.com/view/1231 page, the View component will be displayed in your browser. You must implement the fetchData method. This method will be called before rendering View

 class View extends React.Component { fetchData() { // implement fetch data here } ... }