I have a component in my header that is kind of static on the page. and outside of the <app>.
I would like to know if it is possible for this component to get the router parameters, or if I have to manually check from window.location and split the string with some regex.
The app I work on do not implement some kind of service to get those parameters, so I am asking for an angularjs native way if there is.
Related
I am wondering if there is a way to have proper access to router via javascript. I need to redirect on certain cases, from pure javascript-based methods where I can not use things like Link components like here.
Right now, I am using a method I created:
navTo(pageHash){
window.location.hash = pageHash; // e.g. "#settings"
window.location.reload(true);
}
But I would like to know if there is another elegant way, e.g. using a router component exposed to the js api.
I'm currently working in a multi-language application with Next.js that I intend to host in an S3 bucket.
In this site, I need to maintain an application state across routes, by doing client-side routing from one route to another.
Since I need to support 40+ languages and internationalization, the process to do so is the following:
In next.config.js, use exportPathMap to generate /[language] routes with a variable inside "query" that contains that particular locale for the language.
Load this locale in getInitialProps of _app and pass it down with a Provider, to be consumed in any part of the application using the context API.
To support client-side routing, I've wrapped the next/link component in a custom Link that passes down all props and sets the "as" prop to "/[language]/[route]".
This solution works for now, but ideally, I wouldn't need to "mock" the routing with the "as" prop. I have found that dynamic routing in next does not allow client-side routing in a way to avoid refreshing the page to a new .html file that matches the dynamic path.
E.g:
Using the following directory structure:
/pages
index.tsx
/[lang]/
home.tsx
dashboard.tsx
From index.tsx, clicking on a link from next/link that redirects to /en/dashboard will trigger a request to the server and refresh the page completely. Thus, losing the client state.
Is there a better solution for this? It seems like a very common problem to solve, yet I cannot find an elegant solution using Next.js.
I'm using server side rendering for my React app but can't wrap my head around the logic for showing error pages when something goes wrong.
For example:
User requests /article/123
Something goes wrong while fetching the article
I would like to show a 500 error page
The server side part was easy. I tell React-Router to serve my error component. So far so good.
But when the page is served, the client-side javascript is executed and it takes over rendering. React-Router see the url /article/123 and loads the component that shows the article (but fails since the data is not present..)
Is there a way to let the client-side know that we want to show the error component instead?
The only think I could think of is the following: Add the error to the global redux state. Before rendering a component, check if the error is present in the global state and show the error component instead.. But the downside of this is that you have to implement that checking logic in all of your components. There should be some kind more elegant way to fix this..
There's a few different ways to implement client-side error handling; I find using Higher Order Components work best. You would create a wrapper component that checks for errors from the server response. If it finds one, serve the appropriate error page. If the HOC doesn't detect an error, serve the component the user originally requested.
Here's a great explanation on how to implement HOC:
https://medium.com/#franleplant/react-higher-order-components-in-depth-cf9032ee6c3e
I have a complex form built with react-redux, and I need to know whether this form is valid from another javascript on the same page. Some jquery module.
The easiest way would be add valid/not_valid dynamic class to the react form, and to do something like
$('#myform').hasClass('valid')
But let's say that validation is not the only thing I need from this react app and I want to build a kind of interface for that with some getters. e.g.:
isValid(), getTitle, doSomethingElse methods.
what would be the right way to do that?
Ideally you would store any information you need outside the React application within the store, then simply access the store within whatever jQuery you are writing. This would also work going the other direction, update the store with any particular data that the React application might need to be aware of.
One possible approach:
You can try saving the reference to the store that you instantiate in a global variable.
E.g. Let's say in your top-level React compnonent App.js you do
import MyMainStore from '..../MyMainStore';
.
.
.
<Provider store={MyMainStore}>...</Provider>
//Then finally also do
_MyApp.ReduxStore = MyMainStore;
That way in the non-react/redux part of your app you can access the state via -
_MyApp.ReduxStore.getState().myFormReducer.someExpectedState
Look forward to hearing if that works for you.
Any quick-and-easy answer to the scenario where you want to build something like a simple questionnaire with React and React Router where you don't want the user to be able to modify the URL to browse anywhere and you also don't want to push history state into the browser, essentially preventing use of the back button?
Sample routes might look like:
questions/1
questions/2
questions/3
...so on
But the URL should stay the same at all times and the history won't change, essentially what a single page app without routing would behave like.
For the history part, you would need to use replaceWith() everywhere you want to change route.
If you're using <Link>, you could create your own version which uses replaceWith instead of transitionTo - you should just be able to copy its implementation and replace the PropTypes require call with require('react-router/lib/PropTypes').
I can't immediately think of a non-horrible way to prevent the user from jumping around though - presumably you also want the app to break if they try to start on anything but the base URL? I would just use some simple state to control which component is currently being rendered instead of using React Router if that's the behaviour you really want.