I have a react app which does not render when zipped and loaded into facebook instant game platform. It generates logs such as below, that clearly show that the actions are firing. See the logs with Middleware ACTION-NAME below.
If someone can give me ideas on what could be going wrong, that would be great. Does JSX in an iframe need some special permissions to write to the #root tag?
I solved it thus,
I am using BrowserRouter in react for navigation. I had to change the route path I wanted to load initially from / to * .
- <Route exact path="/">
+ <Route exact path="*">
It seems like initially, when running the game inside the iframe, the route path did not match / .
Related
Let me present my problem,
I have two subdomains in the same react SPA codebase, say abc.domain.com and xyz.domain.com
I've logically separated the Route block inside Routes for both subdomains.
This is my code at the root level
<BrowserRouter>
<div>
{isabcSubdomain() && <AbcSubDomainApp />}
{isxyzSubdomain() && <XyzSubDomainApp />}
</div>
</BrowserRouter>
Inside AbcSubDomainApp
<Routes>
<Route path="a" element={<A/>}/>
<Route path="b" element={<B/>}/>
</Routes>
Similarly, inside XyzSubDomainApp
<Routes>
<Route path="x" element={<X/>}/>
<Route path="y" element={<Y/>}/>
</Routes>
Now, I am at abc.domain.com/a and want to navigate to xyz.domain.com/x without any page reload, just with a button trigger (say), is there any way to achieve this?
This is not possible, but not only because it is not supported in React.
Each time a browser detects a change to a new domain (subdomains too), a request to a DNS server is triggered (it may be cached but the request is always made), and the browser will then treat the content as coming from a different source.
This happens for very good reasons.
If you were to suddenly switch domains without reloading, how would the browser know which site data to use?
If you switched domains without realizing, you might accidentally enter private information into the wrong website!
I recommend you do not pursue this functionality within your website. Having two copies of the exact same code on different websites is not a good solution.
I'm using React Router Dom and the BrowserRouter object to enable browser based navigation for a site I'm building. Navigation works well, but if a user hits the back button, the entirety of my App's state is wiped clean.
I'm not sure why this is happening. I've tried searching around, but all of the answers I've found don't mention why App state is getting reset.
Here's my implementation:
<BrowserRouter>
<Switch>
<Route path="/" exact render={()=><LandingPage/>}
<Route path="/about" render={()=><About/>}
</Switch>
</BrowserRouter>
Am I doing something glaringly wrong? Could anyone with experience working with React Router give me some advice? Thanks so much!
If someone like me has this problem in the future and comes here from Google, here's what's going on:
React Router doesn't store state between page loads. It just routes traffic between components and handles history, among other things.
You need a separate state management store to preserve state changes. (Redux was recommended).
Thanks #charlietfl for the info.
I need to render a page for base url in react. I defined base url as,
<Router basename="/baseUrl">
<Switch>
<Route path={"/childUrl"}
</Switch>
</Router>
I am able to render page via /baseUrl/childUrl. When accessing, /baseUrl it redirects to /baseUrl/childUrl. How can I set a different page to /baseUrl
I know this is old, but in case anyone else stumbles upon this I would recommend using redux-first-router. It lets you dispatch actions either by changing the url in your browser, or the regular react way. This lets you control how components are rendered and keep the state of your application in sync with the url, without having multiple sources of truth.
Michael Sargent did a brilliant explanation, which can be found here.
And of course, you can also check out the git repo.
I have a react app, it uses react router dom. I built it and moved it to, say,
http://domain.tld/ the site works fine. I have two problems :
if I visit the app and then click on a pdf linked (which is just a real file on my server) react-router-dom somehow hijacks it, and shows me the 404 page I set up in react router
same goes if I try to access, for example, http://domain.tld/api/whatevs, it doesn't work either
in both case if I empty the cache, I can see my pdf, or the json result of my api then a js is injected, and a refresh gives me my 404 page.
How can I prevent react router to hijack everything ? I already have a mandatory apache rewrite to redirect in case files dont exist.
EDIT: as requested in a comment, here is how my routes are defined :
<BrowserRouter>
<div>
<Menu />
<Route path="/" exact component={Home}/>
<Route path="/pages/:page_name" component={Page}/>
<Footer />
</div>
</BrowserRouter>
I removed some routes, but the structure is intact.
EDIT2:
from what I gathered, in fact, the service worker 'hijacks' all my static server route, and that's suppose to be normal, so I'll just unregister it, but if I'm correct I can't do that unless I want my app to reload on each link, I'm still looking for a way to tell it : "pretty please, dont touch /api/, /assets/ etc"
EDIT3:
and this might just be what I need :
Setting service worker to exclude certain urls only
I'll try when I'm at work tomorrow
Is it possible to refresh the react component route on history pushState?
For ex :
<Route path="/" component={App}>
<Route path="/search/:query/" component={search}/>
</Route>
this.props.history.pushState(null,"/search/test");
Suppose if i am on the search route itself, and in my code am pushing the state,is it possible to refresh the route?
Apparently not, and it's not something the react-router maintainers are planning to support since that's not how react works (i.e. only if virtual dom changes will react reload the component). See this thread for the context of the discussion.
Angular blows everything away and reinitializes all of it. React will do a virtual DOM diff. None of your willMount, didMount etc. hooks will be called. But you'll get "already mounted" hooks like componentWillReceiveProps and componentDidUpdate.
There could be 2,000 people asking for this feature to try to reload their data, but React (not React Router) just doesn't work that way.