Angular to React - How to replace use of pound sign (hashtag)

Question

I am about to redo code switching from Angular 1 to React. I have been using React Boilerplate for a while, which uses React Router v3, and I really like the setup. My Angular project uses URLs like example.com/#/about and I really don't like the concept of the # sign so I want to make the URL look like example.com/about.

The problem is some URLs have been given out to the public so I would like for them to be backward-compatible. For example, if a user goes to /#/about, then they will be automatically redirected to /about.

If you know the React Boilerplate's ecosystem, that would be helpful. I know the concept of redirecting is simple, but I would like to do this in a clean way within the boilerplate. Any ideas?

Thanks!

This is documented pretty clearly in the react-router v3 docs: https://github.com/ReactTraining/react-router/blob/v3/docs/guides/RouteConfiguration.md#preserving-urls — Calvin, Jun 16 '17 at 19:02
Thanks for that link. I never ran across this and it's a start, but React Boilerplate uses `react-router-redux` also and the routes are declared differently. I will continue to try figuring it out but if anyone can help in regards to React Boilerplate, it would be much appreciated. — Martavis P., Jun 16 '17 at 21:12

Martavis P. · Accepted Answer · 2017-06-20T01:14:27.323

Thanks to @Calvin's comment above, it sent me down a different thought process. I found out that React Boilerplate allows redirects like so:

onEnter: (_nextState, replace, next) {
    replace('/something');
    next();
}

This is to be placed inside of the routes.js file. The link to the question/answer where I found this answer is here.

Edit

The exact answer ended up being this function:

const sniffHash = (nextState, replace, next) => {
    if (nextState.location.hash !== '') {
        let path = nextState.location.hash.replace('#', '');
        replace(path);
    }
    next();
}

in which I used the variable name on my home route like so:

path: '/',
name: 'home',
onEnter: sniffHash,
getComponent(nextState, cb) {
    //React Boilerplate router stuff
}

The only caveat is if I needed anchor links, then I would have to figure something out. Not ideal, but it may help someone who has to make this type of transition.

Angular to React - How to replace use of pound sign (hashtag)

1 Answers1

Edit