I have all my /api routes that require auth going through node but I want to also expose and have web routes that I can do in react and decouple from the server.
Is there a way to have react (or react router) handle web routes?
Well, that's basically what React Router is for. It'll act upon changes to the URL and instantiate the component that you specify in your routes.
Without React Router, just treat it in the same way as you would any JavaScript project: listen for history changes or hash changes and re-render accordingly. But with React Router you have a solution that integrates with React and provides utility functions and hooks to make life easier.
Related
I have a fully functional React web-app that now has a new requirement of loading separate images based on the URL suffix. It seems that in order to retrieve any information from the path I need to have a React Router App. Is there ---
A: A way to easily migrate to React Router so I can use this.props.location.pathname?
or B: Another way to retrieve the pathname without migrating to React Router.
Thanks.
Using react-router to do only that would be overkill. You can easily retrieve the url path with window.location.pathname. What you should is setup a listener on the location that sets the pathname to state and you can pass it down to the components that need it.
window.addEventListener('locationchange', function(){
console.log('location changed!');
}
I have webapp written using React and React Router.
Are there any pros/cons of using window.location.href to redirect vs using the component provided via react-router?
Use history.push('/page-name') if you don't want the browser window to be reloaded, or window.location.href if you want to reload it. Usually when using the React Router the default behavior is using the history.push (this.props.history.push('/page-name') to be more specific, as the rest of the navigation through the application is already using React Route's <Link>, which has the same effect.
React-Router provides an interface for changing the URL either by modifying history or by using a Redirect component.
The React-Router interface is much more expressive than just manipulating window.location.href. I think the main pro of using React-Router is the added functionality, abstraction, and cleaner interface. Don't know that there are any real performance differences.
I've added server-side rendering to React app and it works when you go directly to those URLs, but Link components just change url in search bar and UI stays the same.
Does anyone know potential solution?
P.S.
I've updated to React and ReactDOM 16.0 and using hydrate() instead of render().
Update:
I just needed to pass main component to withRouter HOC.
I just wanted to know the difference between react router and react habitat. From what I have been reading (which is not much) these two solve the same problem of externalizing components of a website. I would like to know why one would consider one above the other if they are even comparable in this manner.
React Habitat does not worry about routes or the application information architecture (IA). It simply lets some other system render HTML pages how ever it likes and will hook up one/or many React apps on the fly when ever it see's targets in the html. If a CMS content author changes the URL of a page, or adds a new page no problem React Habitat doesn't care and will continue to hook up React apps.
React Router use routes (urls) to mount React components, this means it needs to know allot about the IA of the application and cant simply be 'dumb' to it like React Habitat. If a CMS content author changes a URL React Router will no longer render, it will require a developer to update the route in the javascript. You could be fancy and dynamically load routes from the CMS but I would question is this too tightly coupled.
They both solve different problems.
1) If you are building a SPA or PWA and want to hold all the IA in the javascript application then use React Router.
2) If a system (.net/php/java/etc) is rendering your HTML such as a CMS and it holds all the IA then use React Habitat.
In the React-Router documentation I have seen that It has import both Route and Router modules from react-router-dom. I would like to know what is the different between those two modules?
Router
Router component is what makes the connection between browser location and the react application. It doesn't render anything visible on your page. It just exposes API to interact with location changes of the browser via React context. So any component down the tree can use this API to change their behavior based on location changes in the browser or change the browser location into what they want.
Router is the abstract for all other specific router components. Practically, we use a specific implementation of it like BrowserRouter, MemoryRouter, and HashRouter which use different methods to manage browser history. Also, Router is usually a top-level component in the component tree and use only one time in the entire application. All other react-router components should be descendants of Router as they can't function without the API which Router provides.
Route
Route is much simple to explain. It just renders some UI when a location matches the route’s path. So an application can have many Routes based on its layout complexity in different levels of the component tree. Also, Route has some additional props to configure how the match should happen. Route internally use API provided by Router to access the location and decide whether to render the given component or not.