I'm working on a project that, for reasons too long to get into, at one point needs to redirect the user to the API. The problem is that the API and the React front end are on the same domain. So when the browser requests mydomain.com/api/blahblahblah, it gets picked up by React Router and never reaches the API.
I need React to ignore requests to that one particular route and to let the API handle it.
The app is hosted on Heroku so there's a chance this is a Heroku issue, not a React issue.
If you simply use the good old anchor tag (a tag) you should get the desired effect.
Also, you can trigger a redirect using JS:
<MyComponent onClick={ () => window.location.href = 'this/awesome/url/' } />
Related
I have made a back button for my isomorphic react application and am accessing the current URL of the page to check if my user is coming from the inside my application entry point or directly entering the URL for the subpage of my application into the browser. The thing is that if someone has hit my subpage URL directly then I redirect them to a default page otherwise I allow goBack functionality provided by withRouter HOC from React.
my code to handle Back button functionality looks like this
if(this.props.location===reactReferer.referer()){
this.props.history.push('/about')
else { this.props.history.goBack(); }}
what am I doing wrong as this doesn't seem to be working? I imported the following package and npm installed it 'react-referer'
Every time I try and use Auth0 SDK in a new react js project, it gives me this issue. In the past, I usually circumvent this problem by using their ready to use react js sample. This time I cannot use that sample, so trying to get some help.
After successful login, on every route change, there is a network call to the token endpoint, and a new token is generated and received by the app. Every time. The app does not prompt a log in. It already knows that the user is logged in. It simply goes ahead and asks for new token.
Here is a photo of how it looks. All this activity in less then a minute.
I have raised a issue on the SDK Github Repo here - https://github.com/auth0/auth0-react/issues/181
Further, I have configured the SDK, as per the steps, available here. https://github.com/auth0/auth0-react#getting-started
As per the getting started, all I need to do is wrap my App inside their component. This is my index file, with the wrapping.
ReactDOM.render(
<Auth0Provider
domain={config.domain}
clientId={config.clientId}
audience={config.audience}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
scope={config.scope}
>
<React.StrictMode>
<App />
</React.StrictMode>,
</Auth0Provider>,
document.getElementById('root')
);
The bizarre part is the React sample runs just fine, and I have compared every possible setting of that sample with my project, but nothing stands out. the react sample is configured to use the exact same server, and running on the same computer and browser.
The pull request I raised, one of the auth0 developers provided me the solution.
quoting the Auth0 developer from the pull request,
"The issue is that you're bypassing react-router and loading a new page when you click <Button href="/about". "
So, that was the problem. I had accidentally (being new to react js) written code that was invoking the token call.
solution, also quoting the Auth0 developer,
import { Link } from 'react-router-dom';
const Home = () => {
//...
<Button tag={Link} to="/about" color="primary" size="sm">about</Button>
// ...
}
more details here - https://github.com/auth0/auth0-react/issues/181
I'm working on a project and I have two components called home , about components.
When I'm on the home component and I'm going to the about component everything all right
but When I'm on the about component and Reload the page again error not found(404).
what?
The problem is, on your first load (at home component), client receive the whole ReactJS App and the routing from that point will be handled by ReactJS App (client routing). In your second case, you are at the about (component) and reload the app, the request send to the server like .../about and no route on server match it then it returns 404.
P/S: Follow along with Next official tutorial, you will face that case and they explain quite clear about it.
https://nextjs.org/learn/basics/getting-started
I have a simple route in React:
<Route path="/listUsers" exact component={UsersList} />
Different component (navigation) holds the link to the UsersList:
<Link to="/listUsers">All users</Link>
My back-end is very simple, once you make get request to /listUsers it responds with all the users, like:
app.get('/listUsers', function (req, res) {
UserModel.find({}, function(err, users) {
res.send(users);
})
})
I'm facing two problems here:
when do I actually make the request? should I perform react's fetch on componentDidMount in UsersList component? or maybe on componentWillMount? so it will work like this - user clicks a link - I'm mounting component via react-router and at the same time - before/after mount performing fetch, does it make sense? I guess after fetching I should update the components internals somehow (possibly using props?),
my node server is at localhost:3000, so I should be hitting localhost:3000/listUsers, yet my React app is being served by Apache at localhost, so the <Link to="/listUsers"> actually points to a wrong URL, I guess I'll be able to provide the proper URL within React's fetch?
I know these are noobish questions but I'm sorry to say I found it very hard to make these clear to me and I'm not sure if https://facebook.github.io/react/docs/hello-world.html is the official React's documentation, because it's simply awful and it's next to impossible to find anything there.
Thank you so much.
I am building an isomorphic app with React that must support users without JS.
I am new in this technology and I have a basic doubt:
The server can store the components states to emulate what React does in the client-side?
I imagine this flow when the user dont have JS:
The user click a button and send a request to the server.
The server recovers the state of the app and makes changes in it.
The components listen this changes and are rendered again.
Is it correct?
Assuming that you're using react-router :
The server aims to initialize your state, to provide it the default minimum values necessary to make your application work while getting an url.
For example, if you have an application in which you want to display a user list, let say on /users URL, when you'll send your first request, the server will store the users in the react state.
After that first load, you'll be working on the client side using react-router, and making XHR request.
However, if you refresh your page, the process will start again : first load initializing the state and then client side navigation.
EDIT : Explanations =>
When you want to use react on the server, this means that you use a Nodejs server. The fact is that react-dom provides a method called renderToString that transform a react jsx component into standard HTML.
This aims to load the first call faster
Why ?
When you load a "big" JS application on the client, you have some delay time, the time your browser needs to download your JS bundle.
Server side rendering aims to avoid that behaviour, or at least, to gives the feeling that the app starts faster.
In no case you can only use react, even if you use your server side renders. Why ? . Because your events on buttons, or asynchronous load on client, or keypress are in JS language.