score:1
Accepted answer
use matchpath
for react router 4+
as noted above, though off topic from your question... you should be using staticrouter
for react router 4
app.get("*", ( request, response ) => {
const store = configurestore();
const promises = routes.reduce((acc, route) => {
if (matchpath(request.url, route) && route.component && route.component.initialaction) {
acc.push(promise.resolve(store.dispatch(route.component.initialaction())));
}
return acc;
}, []);
promise.all(promises)
.then( () => {
const context={};
const markup = rendertostring(
<provider store={store}>
<staticrouter location={request.url} context={context}>
<app />
</staticrouter>
</provider>
);
const initialdata = {};
response.send(`
<!doctype html>
<html class="no-js" lang="en">
<head>
</head>
<body>
<div id="root">${markup}</div>
<script src="/app.bundle.js" defer></script>
<script>window.__initialdata__ = ${serialize(initialdata)}</script>
</body>
</html>`);
});
});
i use this to call the initialaction method (which is static) on any components where i might want to preload the data for the component on the server side. however you can write all of your components without this method and the code below will work just the same.
note that the routes is an object in another file e.g.
import home from "./components/home";
const routes = [
{
path: "/",
exact: true,
component: home
}
];
export default routes;
Source: stackoverflow.com
Related Query
- TypeError dispatcher.useState is not a function when using React Hooks
- React TypeError this._test is not a function
- How to fix TypeError _interopRequireDefault is not a function in Create React App
- REACT Uncaught TypeError .then is not a function
- There is TypeError (0 , _ColorReducer.color) is not a function error in React + Redux code
- Uncaught TypeError rendering <Router> using React Router in ES6: type.toUpperCase is not a function
- React Redux TypeError - is not a function
- react native TypeError (..) is not a function
- react + SSR: TypeError: match is not a function
- React Redux TypeError this.props.setEmailText is not a function
- Getting a typeError in React saying this.props is not a function when child component tries to call passed function
- How to fix React Context's object is not a function - TypeError
- React JS TypeError - this is not a function
- React app compiles successfully and works but after reloading the page in the browser I get a TypeError var.filter is not a function
- React typeerror in axios callback TypeError: this.setState is not a function
- React TypeError this.state.data.map is not a function
- React this.setState is not a function
- React JS - Uncaught TypeError: this.props.data.map is not a function
- React + Material-UI - Warning: Prop className did not match
- onclick function is not working in react native application
- Error with basic React Example: Uncaught TypeError: undefined is not a function
- React Native: this.setState is not a function
- React - useState - why setTimeout function does not have latest state value?
- React 18: Hydration failed because the initial UI does not match what was rendered on the server
- React store.getState is not a function
- React Context: TypeError: render is not a function
- React App - createProxyMiddleware is not a function
- TypeError: environment.setup is not a function in React Testing
- How to fix nextCreate is not a function setting up useMemo setting up authentication react router and hooks
- Uncaught TypeError: create is not a function using useEffect React Hook with AJAX request
More Query from same tag
- Can you add your own fonts in your react native app?
- Shadow under fixed header upon scrolling
- Loading data asynchronously and downloading CSV data with a click is one step behind the latest retrieved data
- How stop display navbar on specific pages like 404 error page in Reactjs?
- A chat notification Indicator
- email type validation not working when incorrect email is submitted to form
- onSelect function in antd calendar component
- How do I render single element of array?
- Update ReactJS state array
- React form not recognizing typed input
- The prop `store.subscribe` is marked as required
- How can I alter image size in a Quill Editor- React?
- How can i add loading spinner before fetching data in react?
- How can i use .map() only when there is an array?
- Create labels for whole website in one javascript file
- ReactJS API call from componentDidMount returns index.html as response
- _this3 not a function (React)
- Next.js Image component Tailwind-css not working
- How to render a component using variable or props?
- How to test if method was called inside componentDidMount?
- React typescript, what are the render props?
- React js button refresh and loading new set of data
- Calling the props from within the class
- React generating UI from object - console.log works but nothing generated
- React with render props - component not updating on props change
- React his.setState is not a function
- How could I pass token from cookies to each request using mobx?
- Functional React: call function from imported component
- React.NET, Webpack - 'ReactDOM' is undefined (client side)
- how to hide or show a div if checkbox is selected in React JS