获取React路由器以重新渲染

时间:2017-09-17 17:09:14

标签: javascript reactjs react-router

我的主页上有混合内容。用户特定内容是他们自己内容旁边的编辑按钮。 当用户通过注销路由注销时,此代码将被执行:

   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);

然而,替换('/');将您发送回主页,但不会重新呈现任何组件。请注意,此处无法更改状态。我是否需要一个州来强制重新渲染?

注意,如果您按浏览器上的刷新,则会发生所需的行为。我试着查看React Router的代码,但找不到很多关于事件的信息。说实话,我并不完全理解onEnter={(nextState, replace) =>

2 个答案:

答案 0 :(得分:1)

您可以使用location.reload()使其重新呈现

答案 1 :(得分:0)

onEnter - &gt;当函数在浏览器上呈现时,此函数使用。

对于您的想法,您需要在特定组件的组件生命周期中使用基于组件的日志详细信息路由。在路径组件生命周期(componentWillMount或componentDidMount)中使用的代码,并根据需要路由页面。

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

在路由器中调用基于组件的日志详细信息,如下面的示例

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