React路由器仅在按下后退按钮时才有效

时间:2016-06-01 03:01:57

标签: javascript reactjs react-router

我有一个非常简单的反应路由器设置,但无法正常工作。当我导航URL栏更改但反应路由器永远不会更新页面。如果我重新加载页面,则在初始加载时呈现正确的路由。如果我按后退/前进按钮,路由器之间的路由器正确导航。即使后退/前进正在使用反应路由器点击指向页面的链接,我可以通过后退/前进到达仍然无效。

我的路线

import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import AppContainer from './components/react/app_container.jsx'
import Signup from './components/react/login_and_signup/signup.jsx'
import SplashPage from './components/react/splash_page/splash_page.jsx'
export const routes = (
    <Router history={browserHistory}>
        <Route path="/" component={AppContainer}>
            <IndexRoute component={SplashPage} />
            <Route path="signup" component={Signup} />
        </Route>
    </Router>
);

引导我的应用

import ReactDOM from 'react-dom';
import {routes} from '../imports/client/routes'

ReactDOM.render(routes, document.getElementById('app'));

我的AppContainer

import React from 'react';

let AppContainer = React.createClass({
    componentWillReceiveProps(nextProps){
      console.log("next props? ", nextProps);
    },
    render(){
        return <div>{this.props.children}</div>
    }
});

export default AppContainer;

在我的启动页面中:

<Link to="/signup">
   signup
</Link>

以下是我得到的行为:

  1. 在/ URL重新加载页面,启动页面
  2. 点击注册链接,网址更改为/注册,但未呈现注册组件,并且未输出componentWillReceiveProps中的console.log
  3. 在/ signup上重新加载页面,并且注册组件正确呈现
  4. 按后退按钮,启动页面组件正确渲染,道具从componentWillReceiveProps输出
  5. 此时前进和后退按钮正常工作
  6. 点击启动页面上的注册链接,网址更改为/注册但没有任何反应
  7. 据我所知,我已经正确配置了所有内容但反应路由器默默地失败,除了后退/前进按钮。

    我在React 15.0.1和React Router 2.4.1上。

1 个答案:

答案 0 :(得分:1)

meteor包Iron Router被包含在我的项目中并与React Router冲突。删除Iron Router解决了这个问题。