React-Router Questions/Issues

Question

I've decided to use React-Router to manage the routing of my Meteor JS App that uses REACT JS.

I've gotten React-Router to work 'somehow', but it is having some negative side effects that I would like to explain here, in the hopes of finding a solution.

First of all, here is my code:

if (Meteor.isClient) {
    Meteor.startup(function () {
        console.log('startup');

        Hooks.init();

        const {Router, Route} = ReactRouter;

        const history = ReactRouter.history.useQueries(ReactRouter.history.createHistory)()

        React.render((
        <Router >
            <Route name="home" path="/" component={Sidebar}>
                <Route name="managedata" path="managedata" component={ManageData} />
            </Route>
        </Router>
        ), document.getElementById("render-target"));

    });
}

and in order to navigate between those two routes I've used the Link component provided by React-Router:

<ReactRouter.Link className="item" to="/">
    <i className="home icon"></i>
    EXAMPLE
</ReactRouter.Link>

<ReactRouter.Link className="item" to="managedata">
    <i className="block layout icon"></i>
    Manage Data
</ReactRouter.Link>

This is the problem: 1.) Upon loading of the homepage which has the "/" as the path, I am getting random characters showing the URL. This is ugly especially since one would only expect "/" or just nothing to show in the url aside from the domain name or localhost.... e.g. http://localhost:3000/#/?_k=q2c52z

2.) When I click on the Link to 'managedata' I am also getting some random characters in the URL e.g. http://localhost:3000/#/managedata?_k=6clzfn

Here are my questions:

1.) What is causing those ugly characters to show up in the URL and how do I get rid of them?

2.) Does Link only use the path value? As you can see above, my homepage has a name "home" but a path of "/", I've noticed that if I change the Link to Link to="home" then I get directed to a URL with a "home" on the path which seems to be incorrect.

3.) I ended up using 'component' above as one of the props in Route. I've noticed that many of the examples on the internet uses 'handler'. However, when I use 'handler' in my code.....it doesn't work..... How are those different?

4.) I've defined my routes as above, but when I use the page does not render initially, but if I click back button on the browser and then click the forward button, then it renders. How do I solve this?

Answer 1

Many hours ago I had the above problems. Now I've found the solution and I'd like to post it here in the hopes of saving some time for future readers who bump into the same problem.

Here is the Q and A:

1.) What is causing those ugly characters to show up in the URL and how do I get rid of them?

As per https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md

"If you do not specify a history type (as in the example above) then you will notice some unusual behaviour after updating to 1.0.0. With the default hash based routing a querystring entry not defined by yourself will start appearing in your URLs called "_k". An example of how it looks is this: ?_k=umhx1s. "

So add 'history' into the Router. e.g.

const {Router, Route, IndexRoute} = ReactRouter;

    const history = ReactRouter.history.useQueries(ReactRouter.history.createHistory)()

    React.render((
    <Router history={history}>
        <Route path="/" component={Sidebar}>
            <IndexRoute component={Dashboard} />
            <Route path="managedata" component={ManageData} />

        </Route>
    </Router>
    ), document.body);

Notice the history={history} inside the Router.

2.) Does Link only use the path value? As you can see above, my homepage has a name "home" but a path of "/", I've noticed that if I change the Link to Link to="home" then I get directed to a URL with a "home" on the path which seems to be incorrect.

After reading and experimenting.... The value of 'to' should be the path. Not only should it be the path, it should be the path surrounded by {}. For example, for the route defined above the Link should be used like this:

<Link to={"/"} className="item" >               
<i className="home icon"></i>
EXAMPLE
</Link>

<Link to={"/managedata"} className="item"  >
    <i className="block layout icon"></i>
        Manage Data
</Link>

The surrounding {} made an important difference for me. Otherwise the page would not render initially....I had to click back and forward again on the browser for the page to render.

3.) I ended up using 'component' above as one of the props in Route. I've noticed that many of the examples on the internet uses 'handler'. However, when I use 'handler' in my code.....it doesn't work..... How are those different?

https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md

Based on the above link, it is the difference between the old API and the new API.

4.) I've defined my routes as above, but when I use the page does not render initially, but if I click back button on the browser and then click the forward button, then it renders. How do I solve this?

I've answered this problem in the answer to number 2.). But basically, for me, I added {} around the path and it started to render properly.

e.g.

<Link to={"/managedata"} className="item"  >
        <i className="block layout icon"></i>
            Manage Data
    </Link>