How does the routing work? about react-firebase-starter

[ohNegative]

@koistya quick question: the folder structure is obvious, but I can't seem to get the router to go to the blog index page: http://localhost:3000/blog/ or http://localhost:3000/blog/index but the router is working fine for the two article pages: http://localhost:3000/blog/test-article-one

Is there something I'm missing?

Thanks,

P

[Metis77]

+1

[koistya]

Inside the app.js file there is a hash table with routes in a form of a plain JavaScript object:

const routes = {};

During a build it is filled with routes based on the list of *.js files in the src folder. So that if you have /src/about.js and /src/404.js files for example, it will generate the following routes:

const routes = {
  '/404', () => new Promise(resolve => require(['./404.js'], resolve),
  '/about', () => new Promise(resolve => require(['./about.js'], resolve)
};

It uses webpack's code splitting feature to load missing components at run-time.

Then, when application loads into a browser, it extracts a route handler from that object given a URL path and executes it:

const action = routes[window.location.pathname] || routes['/404'];
const component = await action();
React.render(React.createElement(component), document.body);

Hope this helps :)

[koistya]

[westn]

How does the navigation-link look like?
Is it so that I can navigate to "http://localhost:3000/#about" or "http://localhost:3000/about", I can't seem to get any of them to work.

[koistya]

When you a regular navigation link such as <a href="/about">About</a> this links needs to have a click handler which redirects a client to a new page without full page refresh and prevents the default behaviour (event.preventDefault()). I will try to create an example how you can do it..

[Metis77]

I'd love to have an tutorial, too.

[philkeys]

@koistya

With this routing system, is there a way to have a route, when activated, put the user at the top of the page? I've found that if I click on a link halfway down a screen, then the new view has the same placement.

Any help would be greatly appreciated.

The routes do not work if the compiled/build folder is made to run on a non-nodeJS based server like Apache or WAMP. Only the page at the root '/' loads in a non-node serve. Is there a node server dependency for the routes to work?
Could you advice on how to fix this to make the routes work on a non node server?

[koistya]

@vineesv you may want to change the pages build step, so that it generates index.html for each route. E.g. instead of /about.html you need to have /about/index.html.

[ohNegative]

@philkeys have you tried this yet: https://www.npmjs.com/package/react-scroll

[koistya]

It seems like BrowserSync doesn't understand that '/blog/index.html' should be accessed via '/blog' URL. I guess, it might be a good idea to generate /blog.html instead of /blog/index.html inside the build (dist) folder.

[koistya]

Here is the logic that generates .html file names from React routes:

https://github.com/koistya/react-static-boilerplate/blob/master/utils/routes-loader.js

[ohNegative]

@koistya thanks for the heads up - I'll try that!

[n8sabes]

We need to locate the root of the site one level below the domain name, however the compilation process crashes when you include a path in routes-loader. We need:

http://domain.com/v1/index.html

How can this be done?

[koistya]

@n8sabes I have refactored the routing, do you think it covers your use case? Check it out:

https://github.com/kriasoft/react-static-boilerplate/blob/master/docs/routing-and-navigation.md

If not, please don't hesitate to contact me with some more info about your scenario.