Menu
I have done some googling, but to no avail on this issue. Currently I have the following setup with React-Router
Router.run(routes, Router.HistoryLocation, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
});
export default (
<Route path="/" handler={App}>
<Route path="" handler={Home} />
<Route path="create-job" handler={CreateJob} />
<Route path="jobs" handler={JobStatuses} />
<Route path="job/:jobId" handler={Job} />
</Route>
);
I also have the following webpack.config.js file.
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
path.resolve(__dirname, 'app', 'main.js')
],
output: {
path: path.join(__dirname, 'static'),
publicPath: "static/",
filename: 'bundle.js'
},
module: {
loaders: [
{ test: path.join(__dirname, 'app'), loaders: ["react-hot", "babel?stage=0"] },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
},
plugins: [
// Avoid publishing files when compilation failed
new webpack.NoErrorsPlugin()
],
stats: {
// Nice colored output
colors: true
},
devServer: {
historyApiFallback: true,
proxy: { "\/api\/*": "http://localhost:8888" }
},
// Create Sourcemaps for the bundle
devtool: 'source-map'
};
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Project Hippo</title>
</head>
<body>
<div id="app"></div>
<script src="./static/bundle.js"></script>
</body>
</html>
Now when I go to a url with the following for http:localhost:8080/job/0001 I get a 404 error for not being able to locate http:localhost:8080/job/static/bundle.js
I feel that I am just missing something fairly simple.
As a side not, this is entirely client side routing.
660
To recap, nested routes allow you to, at the route level, have a parent component control the rendering of a child component. Twitter's /messages route is the perfect example of this. With React Router, you have two options for creating nested routes.
In order to serve your React application on every path, you need to tell Webpack and its configuration that it should fallback for every path to your entry point: ... ... Now you should be able to navigate via the browser's URL bar to /about. I hope this helps anyone who stumbles across this issue.
Namely, you need to be comfortable with two of React Router's most foundational components – Route and Routes. Let's start with Route. Put simply, Route allows you to map your app's location to different React components. For example, say we wanted to render a Dashboard component whenever a user navigated to the /dashboard path.
Now on version 6, React Router is one of the most popular React packages and will be used throughout this post to demonstrate the concept of nested routes. I will also include React Router v5 code samples and demos but, I will refer to the v6 version when explaining the code.
It will be nice to know your directory structure.
From your webpack.config.js publicPath, your javascript files are being bundled into http://localhost:8080/static/bundle.js
But you have set a relative path (./static/bundle.js) in your index.html file.
This is why when you visit http://localhost:8080/jobs/0001 your browser tries to look for your bundle.js in http://localhost:8080/jobs/static/bundle.js.
So set your script source in your index.html to use an absolute path, i.e.
<script src="/static/bundle.js"></script>
You should be fine.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
