[Resolved] React Router doesn't update the view

help
1

I am used to use FlowRouter in my apps, but for a new app, I wanted to give ReactRouter (latest version) a chance. I set-up everything like it is described in the Meteor Guide, but unfortunately the routing does not work correctly.

If I switch to a new route, the URL gets updated, but otherwise no change happens. Only if I reload the page in the browser, the new route’s content appears.

Did anybody encounter this problem and found a solution to this?

2

Hey @waldgeist, could you maybe give a little more information about your code? maybe if you are using subscriptions, if you are making the general App layout to wait for the subscriptions to load before loading the routes. I had a problem like this before and adding a wait for subs.ready() fixed it completely.

1 Like
3

Thanks a lot for your response!

The code is still pretty basic. In the client’s main.js file, I got this:

main.js

import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { renderRoutes } from '/imports/ui/routing/renderRoutes';

Meteor.startup(() => {
  render(renderRoutes(), document.getElementById('app'));
});

where renderRoutes is the routing config:

renderRoutes.js

import { BrowserRouter, Route, Switch } from 'react-router-dom';

import App from '../App';
import Authentication from '../auth/Authentifcation';
import React from 'react';

export const renderRoutes = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={App} />
      <Route exact path="/sign-in" component={Authentication} />
      <Route exact path="/sign-up" component={Authentication} />
      <Route exact path="/fortgot-password" component={Authentication} />
      <Route exact path="/change-password" component={Authentication} />
      <Route component={App} />
    </Switch>
  </BrowserRouter>

and the App is defined as:

App.js

import AssetUploader from './uploads/AssetUploader';
import LogoutButton from './auth/LogoutButton';
import { Meteor } from 'meteor/meteor';
import MovingTargets from './tracking/MovingTargets';
import { Provider } from 'react-redux';
import React from 'react';
import { Redirect } from 'react-router';
import { store } from '../api/redux/store/store';
import { withRouter } from 'react-router-dom';

const App = () => (

<div>
{Meteor.userId() ? (
<Provider store={store}>
<LogoutButton />
<MovingTargets />
<AssetUploader />
</Provider>
) : (
<Redirect to="/sign-in" />
)}
</div>
);

export default withRouter(App);

With this setup, the URL would change if a route change happens, but the components are not re-rendered.

4

Ok, found out that this was not a problem with the router, but my misunderstanding of how the AccountReact component works. It will not do any redirects if the user signs in or out. I had to implement this behaviour programmatically, using the onLoginHook.