React js component is not rendering when the pages got refreshed and inner pages on production mode But its Working in Development Mode with same Code..
I'm Using React Router V4, React js with Redux, Webpack.
class Router extends React.Component {
render() {
return (
<Provider store={store}>
<BrowserRouter>
<Switch>
<Route exact path="/" component={LandingPage} />
<Route exact path="/chapterlist" component={chapterList} />
<Route exact path="/posts/:id" component={ChapterDetail} />
<Route path="*" component={NotFound} />
</Switch>
</BrowserRouter>
</Provider>
);
}
}
I guess you need to setup the publicPath
option in your webpack output
section.
output: {
...
publicPath: '/'
}
The error you are having is because when you use a route like /posts/203075
and your publicPath
is not configured then the resources can't be founded. Webpack thinks that your files are in this kind of route /posts/styles.css
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.