Question

我有这个app.js：

import { Route, BrowserRouter, Switch, HashRouter } from 'react-router-dom'
import { env } from 'config'
const Router = env === 'dev' ? HashRouter : BrowserRouter

let store = createStore(rootReducer,
    compose(
        applyMiddleware(thunk),
        window.devToolsExtension ? window.devToolsExtension() : f => f
    )
)
<Provider store={store}>
    <Router>
        <Switch>
            <Route name="aboutus" path="/aboutus" component={AboutUsContainer}/>
            <Route name="home" path="/" component={HomePageContainer}/>
        </Switch>
    </Router>
</Provider>

在AboutusContainer中，我有：

// other imports
import { withRouter } from 'react-router-dom'

class AboutUsContainer extends Component {
    render() {
        return (
            <div id="aboutus">{this.props.text}</div>
        )
    }
}

function select(state) {
    return {
        text: state.aboutUsText,
    }
}

export default withRouter(connect(select)(AboutUsContainer))

在HomePageContainer中：

import { withRouter } from 'react-router-dom'

class HomePageContainer extends BaseComponent {

    render() {
        return (
            <HomePageContent content={this.props.text}/>
        )
    }
}

function select(state) {
    return {
        text: state.homePageText,
    }
}

export default withRouter(connect(select)(HomePageContainer))

在HomePageContent中，它是：

import { Link } from 'react-router-dom'

export default class HomePageContent extends Component {
    render() {
        return <Link to='/aboutus'>{this.props.content}</Link>
    }
}

，如果我单击HomePageContent上的链接，则会看到url更改为/＃/ aboutus，但是页面组件未更新，并且仍在旧页面上。再次单击同一链接将给出：

Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack

确认应用确实将位置识别为预期位置。

我正在使用react-router-dom@4.3.1

另一个问题建议使用withRouter，但是我已经做到了。我想念什么？

Answer 1

我创建了带有虚拟存储的路由的简化版本，并且在两个路由器上都具有魅力。

reducers.js

import { combineReducers } from "redux";

const fooReducer = function foo(state = { foo: "about" }) {
  return state;
};

const reducers = combineReducers({
  fooReducer
});

export default reducers;

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Route, BrowserRouter, Switch, HashRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from "./reducers";

import AboutUs from "./AboutUs";
import HomePageContainer from "./HomePageContainer";

const store = createStore(reducers);

function App({ router: Router }) {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          <Route name="aboutus" path="/aboutus" component={AboutUs} />
          <Route name="home" path="/" component={HomePageContainer} />
        </Switch>
      </Router>
    </Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App router={BrowserRouter} />, rootElement);

HomePageContainer.js

import React from "react";
import { connect } from "react-redux"; // +
import HomePageContent from "./HomePageContent";

class HomePageContainer extends React.Component {
  render() {
    return <HomePageContent content={this.props.foo} />;
  }
}

const mapStateToProps = state => ({ // +
  foo: state.fooReducer.foo         // +
});                                 // +

export default connect(mapStateToProps)(HomePageContainer); // +

HomePageContent.js

import React from "react";
import { Link } from "react-router-dom";

export default class HomePageContent extends React.Component {
  render() {
    return <Link to="/aboutus">{this.props.content}</Link>;
  }
}

AboutUs.js

export default () => "aboutUs";

您可以在<App router={BrowserRouter} />行的示例中在路由器之间进行切换。尝试扩展我的代码，希望它能起作用。

迁移到reactJS 16单击链接不会更新视图

1 个答案: