I am using react router v4. I noticed the same problem in v2 as well:
If I am at some route
/admin/details
and I do a page refresh, the root path of my app is changed to /admin. So any static assets loaded in index.html are missing because /admin is appended to the root path.
Same thing goes for api requests. If i want to make a relative API request from a nested route component, it breaks because rather than calling for example a get('data/images') it would doget('admin/data/images').
Any way around this? I've googled all day and nobody seems to run into this problem, the only answer is absolute paths for the requests.
I figured it out. I was calling my endpoint with a relative path ie I did
get('data/all') instead of get('/data/all') ...same thing with my scripts in the html. I just made them absolute and its all working. Sillyness.
Related
This is my first time trying to use Github pages. I am able to to get the index.html to work, but the style will not. I am serving from the master branch docs/ folder.
Everything works fine when I run it on my local host. Any ideas?
File tree
Stylesheet
Tried changing my static and templated folder names to 'docs' and 'css' as I thought Github looks in specific folders for HTML and CSS files. Also looked to make sure my href was pointing to the right place. I'm new to this, so I may have made a mistake.
EDIT: I am using Flask, which may be causing the issue, website is still static. IDK if Flask and static contradictory.
Thanks
I'm using v6 and vite.js and deploying the built app into a nested directory. Despite specifying the basename attribute in the BrowserRouter element, I'm finding the URLs don't work correctly unless coming in via the index.html. I can work around this with a .htaccess file but it seems like a bit of a hack. Can someone suggest a better alternative? Thanks!
I used create-react-app to bootstrap my project.
I added react-router to my react app. After I build and serve using serve -s build, when I go to any path such as http://localhost:5000/favicon.ico, it takes me to my index, which means the URL change is being captured by react-router. However once I'm there, if I force reload the page with CMD+SHIFT+R then the static file loads as expected. How do I make this behavior the default?
According to the FAQ, when a site is served statically it needs to use HashRouter instead of BrowserRouter
https://github.com/ReactTraining/react-router/blob/master/FAQ.md
I also had to disable the service worker by commenting out two lines in src/index.js since it was caching everything all the time.
Making that change fixed my problem!
Ok, so the title tells very little of my issue.
Basically, I have a project written in node that does something. It's a website that uses express, jade and stylus. I have set up the routing for static content like this:
app.use(express.static('public'));
The website works fine and all the CSS loads properly if, in the HTML, I reference it like this (for example):
link(rel="stylesheet", href="global.css")
As expected, when I hover over the link in Chrome's element viewer, the URL is localhost/global.css
So now I've got a couple of these little project and I want to put them all together. They aren't related but I'd like to put them all on my website. For this I have made a new project that server like a hub for the other ones.
In it, I've setup routing like this:
var proj = require("../proj/server.js");
app.use("/proj ", proj);
and in each of the projects I have set the modules exports like this module.exports = app where app is their respective express app object.
This also worked like a charm. I didn't have to run a separate server instance on a separate port for each project. Instead, you can access them like localhost/proj/
Now here's where the issue starts. The CSS that is referenced in the generated HTML of each project doesn't point to localhost/proj/global.css. Instead it still points to localhost/global.css. And since there's no global.css in the public folder of my hub application, it doesn't find it.
I could, of course, just change the relative URLs to proj/global.css instead of just global.css and this does work, but it means that I need to modify all of my projects. It also means that I have one more string to change should I decide to change their names.
Besides, the URL already shows localhost/proj, so why can't it just be automatically implied that when I reference global.css it should be looked for in localhost/proj/global.css?
I'm sure there's some easy trick I'm missing. Maybe my relative URLs should have some extra stuff that says it refers to the current URL?
Edit:
It actually seems that the relative URLs work, but only if the address in the address bar is localhost/proj/. If it's localhost/proj it doesn't. What can I do to force that last slash?
I don't know if it can help you, but in express, you can define several "public" directories
router.use(express.static(path.resolve(__dirname, 'client')));
router.use(express.static(path.resolve(__dirname, 'public')));
router.use(express.static(path.resolve(__dirname, 'foo')));
In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path when base is defined
Example: link
Can anybody help me with this.
angular docs? what is the meaning of this third point. i also dont understand the solution of normal application on the same directory
When running Angular in the root of a domain, along side perhaps a
normal application in the same directory, the "otherwise" route
handler will try to handle all the URLs, including ones that map to
static files.
To prevent this, you can set your base href for the app to and then prefix links to URLs that should be handled with ..
Now, links to locations, which are not to be routed by Angular, are
not prefixed with . and will not be intercepted by the otherwise rule
in your $routeProvider.