I have two routers, each with one route. The first router, lets call it the page router, handles the route: "" by drawing the page furniture (header, footer, etc.). The second router, the module router, deals with a hash route, ":program/config" by showing in the middle of the page the configuration for the chosen program.
The user starts the app by going to the home page: http://host/service/home.html. This causes the page router to draw the home page. The user chooses one of the program configs from the menu and the url changes to: http://host/service/home.html#ABC/config. This causes the module router to display the correct module.
The issue is that when the page refreshes, only the module router is invoked. The page correctly renders the module content, but the menu is gone -- the page router isn't invoked.
What am I doing wrong? How do I fix this?
Your page router have a route with value "" which doesn't exist when you have a url with abc/config. It would be better if you remove the page router and leave only the module router.
Try doing your application to execute whatever the page router is doing onLoad time and leave only one router.
Creating a header and footer that are all the same on every page isn't job for a router.
Related
I have a website with a navbar like that: Home|Shop|About.
But I want a link on my Home page that opens also the same shop page as the navbar.
How can I implement two Routers that leads to the same Page?
Simply setup for two Routers Path use one Component.
Best wishes!!
I have a problem with my react web app.
I have Multiple components : Home, Login, Header, Footer
I do a GET request in Header to retrieve categories from API and list it in the Header menu.
The problem is when i click on link (to go in Login or Home page), the request in Header is sent again because Header component is include in Home and in Login component.
Someone have a solution for that ?
Thanks in advance :)
check out using a router, such as React Router, to handle multiple pages without reloading layout stuff like your Header.
alternatively, you might want some caching to not hit the API every time your component renders
I am trying to learn react router 4 but meet some problems. I follow the guide from here https://reacttraining.com/react-router/web/example/no-match, and yes this example works fine in my browser. I can click the links and get things shown in the browser.
but, if I type in the url in the browser instead of click the links, the page shows NOT FOUND
NOT FOUND page
What's happening? Does React-router can only use links instead of typing in URL??
Stijn de Witt explain about this "problem" here: https://stackoverflow.com/a/36623117/8272354
When you initialize with the URL in the "inital route" of your route system, all the routes "know" how to deal with Router Links. So, the React Link does't refresh the browser, just change the route internally in javascript and load the specifyc route. This way everything works fine.
But, when you type the route (not the "initial route") directly in the URL, the router system does't understand that route, and the browser will try get this page in the server.
I am using React and React-router in my SPA. When user navigates from one view to another, URL gets appended with hash (e.g #/broker/5e1f75c6-5a62-4d60-860c-1dd0d5ff8644?_k=w5wn3g) and this is expected and works fine for all views.
However when user refreshes page on any view, I want React-router to redirect to Index Route irrespective of view the user in. Is there any configuration I can do in React-router to setup this?
Right now React-router tries to navigate to matching route view. I just want to redirect to Index route/index.html without any server side redirects. Any suggestions ?
You can use the replace (or push) function of react-router. Call your history singleton's replace method after you set up the history.
Example
import { hashHistory } from 'react-router';
hashHistory.replace('/');
References
https://github.com/reactjs/react-router/blob/master/docs/API.md
We are using backbone/marionette to build a large application that is split up into many independent modules. The main application manages the header, menus, notifications and footers. It also instantiates the router of each module and passes to it the central region of the app page, so that the module can render itself.
We have a router in the main app that responds to the default url by initializing and showing the menus, etc. The menu routes to a module by adding a hash tag to the url. Each module's router watches for the appropriate hash and responds by showing its contents in the region it was given by the main app.
This all works fine until the user wants to bookmark (or simply refresh) the module page. When this happens the module router correctly responds to the url with the hash on it, but the main router doesn't get invoked to reinitialize the menus and footers, so the module renders itself on the full page (without any headers/footers).
I think that the main router should fire the default route before the module router fires its event. This isn't happening.
Does anyone have any idea how I should implement this? TIA.
This may be of some help/inspiration:
Backbone.Marionette Change Region when Route changes
Basically, bind a handler to Backbone/Marionette's route change event, and update menus from that handler.