CODEWITHSUNDEEP
javascriptreactjsreact-router
JohnnyBizzle
JohnnyBizzle

Reputation: 979

Get React router to cause a re-render

I have mixed content on my homepage. The user specific content is an edit button next to their own content. When the user logs out via a logout route this code gets executed:

   import React from 'react'; // needed
import ReactDOM from 'react-dom';
import Home from './components/layout/Home.js';
import Login from './Login/Login';
import PollDetails from './components/layout/PollDetails.js';
import EditPoll from './components/presentation/EditPoll.js';
import CreatePoll from './components/presentation/CreatePoll';
import Container from './components/containers/Container.js';
import {Route,Router,browserHistory,IndexRoute} from 'react-router';
import Auth from './utils/Auth';

const mountNode = document.getElementById('root');

ReactDOM.render( 
  <Router history={browserHistory}>
    <Route path="/" component={Container} >
      <IndexRoute component={Home} />
      <Route path="login" component={Login} />
      <Route path="logout" onEnter={(nextState, replace) => {
        Auth.deauthenticateUser();

        console.log('Logging out src/app.js');
        Auth.clearCookie();
        // change the current URL to /
        replace('/');}} />
      <Route path="Polldetailfull/:id" component={PollDetails}  />
      <Route path="Editthepoll/:id" component={EditPoll}  />
      <Route path="createPoll" getComponent={(location, callback) => {
        if (Auth.isUserAuthenticated()) {
          callback(null, CreatePoll);
        } else {
          callback(null, Home);
        }
      }} />
    </Route>
  </Router>,mountNode);

However, the replace('/'); sends you back to the home page but doesn’t re-render any components. Note there is no state to change here. Do I need a state to force the re-render?

Note, if you press refresh on the browser the desired behaviour happens. I tried looking on React Router's code but could not find much about events. To be honest, I don't fully understand onEnter={(nextState, replace) =>

Upvotes: 0

Views: 2722

Answers (2)

codejockie
codejockie

Reputation: 10844

You could use location.reload() to cause it to re-render

Upvotes: 1

vnomvk
vnomvk

Reputation: 123

onEnter -> this function use when component going to render on browser.

For your idea, You need to use route the component based log details in component life cycle of particular components.below code to be use in path component life cycle(componentWillMount or componentDidMount) and route the page as want .

browserHistory.push('/location-path-name');

call the component based log details in router like below sample 

<Route path="createPoll" component={Auth.isUserAuthenticated() ? CreatePoll : Home}/>

Upvotes: 0

Related Questions