I am using react-router-dom in my react project.
I am trying to programmatically navigate to a new parameter using: history.push("/newparam")
But the problem is navigating like this, isn't refreshing my page. Looks like its doing fake client
side routing. But I want to refresh my browser when I am navigating programmatically.
So how can I do something like a server-side routing using react-router-dom, where the page will refresh when the site will change url?
When you use react-router the complete routing is handled by the react on client side, So the server is responsible to only load the index of the frontend application, This is a normal behavior in Single page application. We do all the communication with the server using XHR calls. Using history.push("/newparam") or <Link route='/newparam' /> is always going to load the page from client side.
I dont exactly know what your usecase, But if you want the page to reload every time you navigate to a new page, use html <a> tag, This will initiate server side rendering. The JS equivalent of this would be window.location.href = '/your-redirect-url';
Let me know what exactly is your use-case so that I can help you further
Related
I recently started learning react now I come to know that Facebook, Instagram and many more use react as frontend, but my question is when we go to instagram.com it give as page which behave as react spa but when we click on login it reload the page so how it is possible, how I can go to server while using react spa.
for Example:- if we take example of Instagram, if you first open Instagram page it behave as spa but when we fill form and click on login the page start reloading why?
You can use several modules like axios or fetch to send the request from your client-side react application to the server. And you can redirect to the route according to the server responses.
Although a hard redirection (which causes the page to reload) is not recommended in a Single page application (SPA), you might wanna use react-router-dom for the same.
Here you can find the default ajax request sample provided in react documentation.
The link for axios library.
I have a working front-end single-page-application written in JS (ReactJS), and a working back-end in Phoenix (Elixir). Everything works out fine as long as navigation happens within the application. However, when I try to access a page in the SPA from the browser, I get a route error fired from Phoenix. For example:
no route found for GET /search (PhoenixApp.Router)
is what I get when I access http://localhost:4000/search from the browser.
When I access http://localhost:4000/search from the navigation inside the SPA, I get a working page from ReactJS.
So my question: How can I get ReactJS to get the page, rather than Phoenix?
The standard way to do this for Single-Page Applications is to serve the exact same thing on every GET route as you're serving on /. You can add a wildcard GET route to your Phoenix Router and point it to the same thing as the route for /. If / is served from PageController's index function, you should add:
get "/*anything", PageController, :index
I am trying to implement a javascript router with window.history API. I've been using ui-router for a long time but I want to create my own router for my smaller apps. Everything looks fine until meeting a problem like this: I am serving my page at localhost:8080/index.html. I am routing in the page with history API related properties. When I click to a route, I lose the index.html part. For example url becomes localhost:8080/home. When I directly try to go to that state, as you expect I get 404 error naturally. How can force to route over index.html to that state?
HTML5 history (pushState, etc) works by rewriting the URL on the client side. Hence it needs the server to also be able to rewrite the URL, and load the same index.html file whatever the URL.
Without this server rewrite, the two possible options are :
Use a hashbang JavaScript router based on URL like /idex.html#!/current/path
Do not use JavaScript for routing, and just rely on server directory structure to serve different file for each endpoint
I have a single page application - which means everything on the server gets redirected to a single index.html file which does the heavy lifting and routing using the HTML5 history api (pushstate).
Now, I want to add a new landing page to the side - let's call it landing.html and I want clients to first get to landing.html when they access / and index.html if they access any other route.
Now IE9 does not support the HTML5 history API, so using "hash urls" paths like /books/authors become /#!/books/authors in it. Since the hash section of the URL is not sent to the server as far as the server is concerned all paths are / which means I can't route to landing.html or index.html based on that logic.
I've thought of a hack - redirecting URLs with / to landing.html, detecting #! on the client, adding a cookie on the server (or client) called notReallyHomePage and redirecting to the correct page based on the cookie on the server. This is really hacky and not a good solution.
What would be the correct way to deal with routing in this case?
My backend is in ASP.NET MVC but I don't think that's relevant to the question
Hmmmmm... What's the content of landing.html? From its name I'm guessing it's a pretty simple page.
Couldn't you have its contents be a part of index.html and hide/show it according to the "first time user" logic?
Or if landing.html is some weird page created by your marketing or something, then place it in an iframe which hides/shows according to the same logic.
(obviously when you show landing.html then you hide index.html)
I am trying to create an MVC web app, without any MVC framework. What I've done is to make an index.html with a section were all the views are loaded, when a user wants them. This though creates the problem that when a user types a direct url like: www.foo.com/bar - it doesn't point him to the view bar. I know how to point the user to a webpage with a router file, but I don't know how to do it, when the view is only a part of a page and it is opened in another page. Can I do this with the router, or how can this be done?
For clarity I am running php on the server side and I use AJAX calls to get the views.
Since all the detail pages do not have a real page server side you need a server side component that rewrites the URLS to a frontcontroller page that loads the index.html and that bootstraps that page with the correct view.
I suggest to take a look at the mini PHP frontcontroller component Silex
If you do not want to use such a component you can always do this using something like apache rewrite rules and your own PHP landing page. This is rather simple for smaller MVC websites. If you're going to build a bigger one I suggest to pick a few smaller frameworks that each do one thing well. I have done this using Silex and Twig on the server side and jQuery and Knockout on the client side.