Reactjs 无法使react router 4渲染路由正确

我用react、redux和webpack开发了一个简单的应用程序

// entry.js
import React from "react";
import {render} from "react-dom";
import { Provider } from "react-redux";
import { Router } from "react-router-dom";
import createHistory from 'history/createBrowserHistory'

import store from './containers/store/index';
import App from './components/App.jsx';

const history = createHistory();

render((
  <Provider store={store}>
    <Router history={history}>
      <App history={history} />
    </Router>
  </Provider>),
  document.getElementById('root')
)

另外，我在

Home

组件上有一个

链接

，它可以更改浏览器导航面板中的路径，但根本不会影响渲染的

Home

组件

// Home.js
import React, { Component } from 'react';
import Header from 'semantic-ui-react/dist/es/elements/Header/Header';
import Button from 'semantic-ui-react/dist/es/elements/Button/Button';
import Container from 'semantic-ui-react/dist/es/elements/Container/Container';
import {connect} from "react-redux";
import { Link } from "react-router-dom";

import l10n from '../../l10n/ru';
import { userRegister } from '../../containers/actions';

const mapStateToProps = state => {
  return { isRegistering: state.isRegistering };
};

class Home extends Component {
  render() {
    return (
      <Container className="page-home">
        <Header as="h1" className="page-title">Home</Header>
        <div className="home-text">
          <p>{ l10n.HOME_TEXT }</p>
        </div>
        <div className="link-signin-container">
          <p>{l10n.HOME_SIGIN_TEXT} <Link to="/signin">{l10n.HOME_SIGIN_LINK}</Link></p>
        </div>
        <div className="home-button-container">
          <Button
            size="massive"
            icon="play"
            content={l10n.HOME_PLAY_BUTTON_TEXT}
            labelPosition="right"
            loading={this.props.isRegistering}
            onClick={this.props.userRegister}
          />
        </div>
      </Container>
    )
  }
}

const connectedPage = connect(mapStateToProps, { userRegister })(Home);

export default connectedPage;

//Home.js
从“React”导入React，{Component}；
从“语义ui react/dist/es/elements/Header/Header”导入标题；
从“语义ui反应/dist/es/elements/Button/Button”导入按钮；
从“语义ui react/dist/es/elements/Container/Container”导入容器；
从“react redux”导入{connect}；
从“react router dom”导入{Link}；
从“..//l10n/ru”导入l10n；
从“../../containers/actions”导入{userRegister}；
常量mapStateToProps=状态=>{
返回{isRegistering:state.isRegistering}；
};
类Home扩展组件{
render（）{
返回(
家
{l10n.HOME\u TEXT}

{l10n.HOME\u SIGIN\u TEXT}{l10n.HOME\u SIGIN\u LINK}

)
}
}
const connectedPage=connect（mapstatetops，{userRegister}）（Home）；
导出默认连接页面；

---

我感觉好像我错过了一些关于react路由器路由的非常基本的东西

尝试使用

this.props.location

而不是

this.props.history.location

。看

至于链接，在本节中

if (!this.props.userInfo && !this.props.history.location.pathname === '/') {
  this.props.history.replace("/");
  this.setState(this.state); // to rerender
}

---

您告诉组件在没有用户且路由与“/”不匹配时重定向到“/”。因此，链接将路由更改为“/signin”，但随后它会立即更改回“/”。

最终找到了导致问题的原因

主页和应用程序组件连接到redux商店。React router会干扰存储，并使用路由器的

功能处理

我一换衣服

const connectedPage=connect（mapstatetops，{userRegister}）（Home）到

constconnectedpage=withRouter（connect（mapstatetops，{userRegister}）（Home））

及

constconnectedpage=connect（mapStateToProps，{}）（App）到

constconnectedpage=withRouter（connect（mapstatetops，{}）（App））

它已经开始完美地工作了

有关详细信息，请查看：
道具中没有位置键。感谢提及历史中的一个逻辑错误。奇怪的是，路径正在浏览器导航栏中更改为/sign。
if (!this.props.userInfo && !this.props.history.location.pathname === '/') {
  this.props.history.replace("/");
  this.setState(this.state); // to rerender
}