Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
gevuong
2,377 PointsEncountering a net::ERR_ABORTED error and 404 error when refreshing page within 3 nested routes.
Hi,
I am not using create-react app. I am using webpack, babel, and es6. Everything has been working fine until I realized the webpage breaks whenever I refresh, specifically when I am in the following nested URL paths: /courses/html, /courses/css, and /courses/javascript. Refreshing the page works when I am in /courses.
This is the following code snippet in Courses component I am using.
const Courses = () => (
<div className="main-content courses">
<div className="course-header group">
<h2>Courses</h2>
<ul className="course-nav">
<li><NavLink to="/courses/html">HTML</NavLink></li>
<li><NavLink to="/courses/css">CSS</NavLink></li>
<li><NavLink to="/courses/javascript">JavaScript</NavLink></li>
</ul>
</div>
{/* Write routes here */}
<Route path="/courses" render={() => <Redirect to="/courses/html" /> } />
<Route path="/courses/html" component={ HTML } />
<Route path="/courses/css" component={ CSS } />
<Route path="/courses/javascript" component={ JavaScript } />
</div>
)
These are the following errors I am getting in devtools when I refresh page in the following URLs is in /courses/html, /courses/css, and /courses/javascript.
GET http://localhost:8080/courses/src/css/style.css net::ERR_ABORTED
GET http://localhost:8080/courses/bundle.js 404 (Not Found)
I even tried copying the code provided by Guil, and running it, but am encountering the same error when refreshing the page. I am not sure what I am missing and why I would get this type of error when refreshing the page in a nested route.
Any help or advice would be appreciated. Thanks. Seth Kroger Steven Parker you both have been really helpful and responsive throughout my learning process. I was wondering if you may have any tips.
Steven Parker
231,275 Points
gevuong
2,377 PointsZack Lee I think so as well. I am not sure what is causing the GET request to specifically /courses/bundle.js. The following is the webpack.config.js file I am using.
var path = require("path");
module.exports = {
context: __dirname,
entry: "./src/index.js",
output: {
filename: "bundle.js"
},
module: {
loaders: [
{
test: [/.jsx?$/, /.js?$/],
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
devtool: 'source-map',
resolve: {
extensions: [".js", ".jsx", "*"]
},
devServer: { historyApiFallback: true }, // to serve your index.html in place of 404 responses
};
Seth Kroger
56,414 PointsI'm thinking the issue may be in the index.html file. Do your links for those resources there start with a slash or not?
gevuong
2,377 PointsSeth Kroger This is the code I am using in index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Front End Course Directory</title>
<!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> -->
<link type="text/css" href="./src/css/style.css" rel="stylesheet">
<!-- The "rel" attribute specifies the relationship between the current document and the linked document/resource -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="root">Loading...</div>
<script src="bundle.js"></script>
</body>
</html>
gevuong
2,377 PointsZack Lee Seth Kroger Ok. In index.html, I replaced the following.
<link type="text/css" href="./src/css/style.css" rel="stylesheet">
with the following.
<link type="text/css" href="/src/css/style.css" rel="stylesheet">
This eliminated the first error message. I never had problems using the former syntax when assigning a href in a link tag. However, it is giving me problems in this project.
However, the second error message still persists.
GET http://localhost:8080/courses/bundle.js 404 (Not Found)
Zack Lee
Courses Plus Student 17,662 PointsGeorge can you please link to your project files? do you have a git hub repo or is it a workspace?
Zack Lee
Courses Plus Student 17,662 PointsGeorge can you post the structure of your project directory? where exactly is bundle being output? is it in the same directory as index.html? it seems strange that the get request is to /courses/bundle.js and I'm wondering if the exact directory needs to be specified in the index.html.
gevuong
2,377 PointsOk. SethKroger was spot on with the forward slashes. In my index.html, I needed to add a forward slash to the URL of the external script file being used. In other words, I replaced the following,
<script src="bundle.js"></script>
with the following,
<script src="/bundle.js"></script>
Thank you for your speedy and helpful responses Zack Lee Seth Kroger I was stuck on this bug for over an hour.
2 Answers
Seth Kroger
56,414 PointsBecause the index.html file can be loaded from either / or /courses or any other path in Routes you can use relative paths for links from there. The browser will consider the path to be relative to the path in the address bar. It has no idea what the actual file structure on the server is. You should use root-relative paths for both in this case, /src/css/style.css and /bundle.js
Zack Lee
Courses Plus Student 17,662 Pointsi'll be totally baffled if this doesn't work
gevuong
2,377 PointsYes, this was what solved the issue I was having with refreshing, which caused the two errors to appear. Thank you Seth Kroger and Zack Lee
gevuong
2,377 PointsZack Lee Seth Kroger just to clarify because I think this is an important learning opportunity.
When implementing routes, index.html can be loaded from any path created in the Route components. Therefore, the browser needs a root relative path for any external resources used because the browser does not know where to locate these external resources relative to the current path it is trying to load.
For instance, earlier, a GET request was being made to /courses/bundle.js. bundle.js could not be found because it did not have a forward slash in front to signify a URL path. Similarly with src/css/style.css, if that makes sense.
Zack Lee
Courses Plus Student 17,662 PointsHey george, the webpack config doesn't look like the problem either. I've mostly used create-react-app so am not too familiar with the webpack setup, but nothing there seems like it would be giving you this problem.
however, looking back over your first block, I might add "exact" to the /courses route that redirects. there could be some conflict there without "exact" since all of the sub routes contain the /courses route and would therefore trigger both the intended route and the /courses redirect.
gevuong
2,377 PointsZack Lee Whoops, Yes, I forgot to add "exact" in the code snippet above. Earlier, I was getting a warning message stating that I was redirecting to the same route as /course/html. By adding "exact", the warning message was removed. Thank you for noticing that and for your speedy responses. However, refreshing a page within a nested route still crashes.
Zack Lee
Courses Plus Student 17,662 PointsZack Lee
Courses Plus Student 17,662 PointsCan you post your webpack config? There errors look like they're originating from somewhere else and not the routes you provided.
Courses/bundle.js 404 makes me think youre trying to access a directory that doesn't exist.