I have been thinking and I am confused with the routing between Client and Server. Suppose I use ReactJS for server-side rendering before sending the request back to web browser, and use react-router as a client-side routing to switch between pages without refreshing as SPA.
What comes to mind is:
How are the routes interpreted? For example, a request from Home page (/home) to Posts page (/posts)
Where does the routing go, on server-side or client?
How does it know how it is processed?
Note, this answer covers React Router version 0.13.x - the upcoming version 1.0 looks like it will have significantly different implementation details
Server
This is a minimal server.js with react-router:
var express = require('express')
var React = require('react')
var Router = require('react-router')
var routes = require('./routes')
var app = express()
// ...express config...
app.use(function(req, res, next) {
var router = Router.create({location: req.url, routes: routes})
router.run(function(Handler, state) {
var html = React.renderToString(<Handler/>)
return res.render('react_page', {html: html})
})
})
Where the routes module exports a list of Routes:
var React = require('react')
var {DefaultRoute, NotFoundRoute, Route} = require('react-router')
module.exports = [
<Route path="/" handler={require('./components/App')}>
{/* ... */}
</Route>
]
Every time a request is made to the server, you create a single-use Router instance configured with the incoming URL as its static location, which is resolved against the tree of routes to set up the appropriate matched routes, calling back with the top-level route handler to be rendered and a record of which child routes matched at each level. This is what's consulted when you use the <RouteHandler> component within a route handling component to render a child route which was matched.
If the user has JavaScript turned off, or it's being slow to load, any links they click on will hit the server again, which is resolved again as above.
Client
This is a minimal client.js with react-router (re-using the same routes module):
var React = require('react')
var Router = require('react-router')
var routes = require('./routes')
Router.run(routes, Router.HistoryLocation, function(Handler, state) {
React.render(<Handler/>, document.body)
})
When you call Router.run(), it creates a Router instance for you behind the scenes, which is re-used every time you navigate around the app, as the URL can be dynamic on the client, as opposed to on the server where a single request has a fixed URL.
In this case, we're using the HistoryLocation, which uses the History API to make sure the right thing happens when you hit the back/forward button. There's also a HashLocation which changes the URL hash to make history entries and listens to the window.onhashchange event to trigger navigation.
When you use react-router's <Link> component, you give it a to prop which is the name of a route, plus any params and query data the route needs. The <a> rendered by this component has an onClick handler which ultimately calls router.transitionTo() on the router instance with the props you gave the link, which looks like this:
/**
* Transitions to the URL specified in the arguments by pushing
* a new URL onto the history stack.
*/
transitionTo: function (to, params, query) {
var path = this.makePath(to, params, query);
if (pendingTransition) {
// Replace so pending location does not stay in history.
location.replace(path);
} else {
location.push(path);
}
},
For a regular link this ultimately calls location.push() on whichever Location type you're using, which handles the details of setting up history so navigating with the back and forward buttons will work, then calls back to router.handleLocationChange() to let the router know it can proceed with transitioning to the new URL path.
The router then calls its own router.dispatch() method with the new URL, which handles the details of determining which of the configured routes match the URL, then calls any transition hooks present for the matched routes. You can implement these transition hooks on any of your route handlers to take some action when a route is about to be navigated away from or navigated to, with the ability to abort the transition if things aren't to your liking.
If the transition wasn't aborted, the final step is to call the callback you gave to Router.run() with the top-level handler component and a state object with all the details of the URL and the matched routes. The top-level handler component is actually the Router instance itself, which handles rendering the top-most route handler which was matched.
The above process is re-run every time you navigate to a new URL on the client.
Example projects
React Router Mega Demo
Isomorphic Lab
With 1.0, React-Router depends on the history module as a peerDependency. This module deals with routing in the browser. By default React-Router uses the HTML5 History API (pushState, replaceState), but you can configure it to use hash-based routing (see below)
The route handling is now done behind the scenes, and ReactRouter sends new props down to the Route handlers when the route changes. The Router has a new onUpdate prop callback whenever a route changes, useful for pageview tracking, or updating the <title>, for example.
Client (HTML5 routing)
import {Router} from 'react-router'
import routes from './routes'
var el = document.getElementById('root')
function track(){
// ...
}
// routes can be children
render(<Router onUpdate={track}>{routes}</Router>, el)
Client (hash-based routing)
import {Router} from 'react-router'
import {createHashHistory} from 'history'
import routes from './routes'
var el = document.getElementById('root')
var history = createHashHistory()
// or routes can be a prop
render(<Router routes={routes} history={history}></Router>, el)
Server
On the server, we can use ReactRouter.match, this is taken from the server rendering guide
import { renderToString } from 'react-dom/server'
import { match, RoutingContext } from 'react-router'
import routes from './routes'
app.get('*', function(req, res) {
// Note that req.url here should be the full URL path from
// the original request, including the query string.
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
if (error) {
res.status(500).send(error.message)
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
res.status(200).send(renderToString(<RoutingContext {...renderProps} />))
} else {
res.status(404).send('Not found')
}
})
})
Related
I'm new to React Router and I'm working on the best way to route to react router.
What am I trying to achieve:
I just want the default route to navigate to /:tenantName/media_management/dashboard instead of /:tenantName/media_management when the Media Management tab is clicked.
Issue:
I'm explicitly checking if the route is initial route and then re-routing to /dashboard. This works but it's
very slow. I can notice the apparent lag when I click on
Media-management Tab.
Wanted to know if there is a better way of handling default route?
Router.js
import { Route, Redirect, Switch, useHistory } from 'react-router-dom';
const AsyncMediaManagement = lazy(() => import('#src/features/media-management/'));
<Route
path="/:tenantName/media_management"
component={withMainLayout(AsyncMediaManagement, 'MediaManagement')}
/>
Media-management.js:
if (contentTypeSelected === '') {
props.history.push(`/:tenantName/media_management/dashboard`);
}
Please help, I'm very new to react router and any help would be very much appreciated.
Try adding exact=true to your Routes
Can we see some more of your 's - do you have the default dashboard route above or below the one you have shown?
RR will match the first route that it finds if you don't add an exact=true prop to the route.
I'm. using React Router and React on a Meteor App.
I use OAuth and after the OAuth call to another site, that site redirects to my URL with the code. e.g. http://localhost:3000/?code=lsK1o0FI8AV0WEVfxhEXiyjZL32we2&state=None
I then read code and use it in my application. After getting the code though I would like to remove the code from the URL to hide it from the user.
How can I do that with React Router or Javascript without reloading?
You need to bind history from react router. Then you need to extract param code from current pathname. If code exists you use the code and replace the url wich you need (for example /). This is possible implementation:
import {withRouter} from 'react-router-dom'
const App = ({
history,
}) => {
const code = new URLSearchParams(
new URL(history.pathname).search
).get('code')
if(code) {
useCode(code)
history.replace('/')
}
return (
<div>...</div>
)
}
export default withRouter(App)
Is there any way to extend react-router of one application which is already hosted on fly? I want to inject additional routes on the click of a link which allows me to inject the script or allows to include my javascript.
Eventually I am looking for two different react applications which has one build and deployment cycle, but interrelated to each other.
Ex. there is the abc.com in which on click of a link(i.e. abc.com/nepage) the entire page is getting reloaded with same content [i.e. say header footer] which is maintained by different team all to gather and they have there one build and deployment cycle.
I want the application to be with SPA even if we have different build and deployment process.
This was achieved using Backbone with help of Backbone.Router.extend, where on click of link the default router for the new page was overridden with all new set of routers and which use to full the supporting files from the path mentioned for the specific router's
With PlainRoutes, child routes can be loaded on-demand (when the user enters the route) and resolved asynchronously. Having that in mind, you can use Webpack chunks to split the code corresponding to theses routes in diferente files. Going even further, you can have multiple entrypoints on Webpack, making users load only the part of the application that affects the current page.
Sample app:
index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import { Router, browserHistory } from 'react-router'
const App = ({ children }) => {
<div>
<nav>Your navigation header</nav>
{ children }
<footer>Your app footer</footer>
</div>
}
const HomePage = () => <p>Welcome!</p>
const routes = {
path: '/',
component: App,
indexRoute: { component: HomePage },
getChildRoutes (partialNextState, cb) {
require.ensure([], (require) => {
cb(null, [
require('./routes/about'),
require('./routes/blog'),
require('./routes/contact'),
])
})
}
}
ReactDOM.render(
<Router history={ browserHistory } routes={ routes } />,
document.getElementById('container')
)
routes/about.js:
import React from 'react'
const About = () => <p>About page</p>
export default {
path: 'about',
component: About
}
Other routes could be similar to the about route as shown above.
I am using React Router in my current project:
const store = Redux.createStore(bomlerApp);
const App = React.createClass({
render() {
return (
React.createElement('div', null,
this.props.children
)
)
}
})
var rootElement =
React.createElement(ReactRedux.Provider, {store: store},
React.createElement(ReactRouter.Router, {history: ReactRouter.browserHistory},
React.createElement(ReactRouter.Route, { path: '/', component: App },
React.createElement(ReactRouter.IndexRoute, { component: Home })
)
)
)
ReactDOM.render(rootElement, document.getElementById('react-app'));
This does not work. The app does not render at all and I don't get any error messages.
However, if I use ReactRouter.hashHistory instead, the app works.
What am I not understanding here?
Server Configuration: the browser history setup can generate real
looking urLs without reloading the page. But what happens if the user
refreshes or bookmarks on a deep nested urL? these urLs are
dynamically generated at the browser; they do not correspond to real
paths on the server, and since any urL will always hit the server on
the first request, it will likely return a page not Found error.
To implement the browser history setup, you need to import the
createBrowserHistory method from the History library. You can then
invoke it, passing the generated browser history configuration as the
history prop of the Router component
***> to work with browser history setup, you need to make rewrite
configurations on your server, so when the user hits /some-path on the
browser, the server will serve index page from where react router will
render the right view.***
I am making an isomorphic react application, but now I am stuck of figuring out how to exclude server-side logic from bundling into client side javascript using react-router and webpack.
So my webpack has an entry points to "client.js" which is the clientside bundle javascript.
import React from "react"; import Router from "react-router";
import routes from "../shared/routes";
Router.run(routes, Router.HistoryLocation, (Handler, state) => {
React.render(<Handler/>, document.getElementById('react-app')); });
"client.js" contains react-router routes definition.
And for the server side, I have epxress and route set up as * (all requests route to here)
"server.js"
import routes from "../shared/routes";
app.get('/*', function (req, res) {
Router.run(routes, req.url, (Handler, state) => {
let html = React.renderToString(<Handler/>);
res.render('index', { html: html });
});
});
Since both client and server share the same routes, if I want to set up a route in the react-router e.g. /attractions/:id that will contain server side logic (database query, etc), it will get bundled by the webpack to the client.js
So I am wondering if there is a way to keep just one routes.js that shared by both "client.js" and "server.js" and have "client.js" not bundle some of the server routes.
I came up few possible solutions. But would like to see the best way to do it.
Keep two routes, one for server and one for client, and server routes is the superset of client routes.
Add another layer of abstraction to react-router, so instead of
<Route handler="/attraction/:id"/>
I can use import ABC from "ABCRouteController" and ABCRouteController will determine whether it's node or client and generate route or not generate route.
class AppController extends React.Component {
render () {
let route;
if #isServer
route = <Route handler={#someHandler}" path="/">
else
route =""
return route;
}
}
Add specific routing to server.js. So instead of
app.get('/*', function (req, res) {
Router.run(routes, req.url, (Handler, state) => {
let html = React.renderToString();
res.render('index', { html: html });
});
});
We add more specific routing for handling pure server side logic (similar to two seperate react-router for server and client)