14

A coherent urn routing on the client-side React application served by Express

 2 years ago
source link: https://www.codesd.com/item/a-coherent-urn-routing-on-the-client-side-react-application-served-by-express.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

A coherent urn routing on the client-side React application served by Express

advertisements

I am currently using Express to load a one page client side app in React.js and react-router.

It is structured such that I have /about and /contact as standard jade views, but /ui as the actual react app. Any subsequent navigation beyond /ui such as ui/dashboard is handled by react-router. This means that if I need to visit www.foobar.com/ui/dashboard, I would need to hit my route for ui*, grab the url past ui/ (dashboard in this case) and pass that to react router (via variable in the jade view which is the react app's entry point) which then loads this route from a react component. I would like to make this approach work as this enables users to save urls for the react app. Trouble is I can't figure out how this could work as:

  • I cannot pass variables with express router redirects
  • I need to load the react app without anything beyond /ui as otherwise react router will append its routing urls in front of it ruining the point in this approach
  • I cannot store the initial request url in a cookie and then redirect as I need to send a response in order to set a cookie
  • I cannot satisfactorily modify the url via client side js

Code:

//Example 1
router.get('/ui*', requireLogin, function(req, res){
    res.render('./app/index', {initURL: req.path); //Doesnt work as everything past ui/ is still present when react-router does its thing
}); 

//Example 2
router.get('/ui', requireLogin, function(req, res){
    res.render('./app/index', {initURL: req.path); //Doesnt work as no way of accessing the initial requests url when redirecting
});

router.get('/ui*', requireLogin, function(req, res){
    res.redirect('/ui'); //Cant pass additional parameters here
});


var express = require('express')
var React = require('react')
var Router = require('react-router')

var routes = require('./routes')

var app = express()

app.use('/ui', requireLogin, function(req, res, next) {
  // store initially requested url as a query parameter
  // e.g. /ui/dashboard would become /ui?redirect=dashboard
  // if the user is not logged in
  var params = req.query;
  // params.redirect === 'dashboard'
  // Now you can check if there is a redirect and use it in your initial route
  var router = Router.create({location: req.url, routes: routes})
  router.run(function(Handler, state) {
    var html = React.renderToString(<Handler/>, {initalState: params.redirect})
    return res.render('react_page', {html: html})
  })
})

Does this get you on the right track?


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK