Мигрировать, чтобы отреагироватьJS 16 нажатие на ссылку не обновляет вид - PullRequest
Новая
       10

Мигрировать, чтобы отреагироватьJS 16 нажатие на ссылку не обновляет вид

0 голосов
/ 18 сентября 2018

У меня есть 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

, что подтверждает, что приложение действительно распознало местоположение в качестве ожидаемого местоположения.

Я использую response-router-dom@4.3.1

Другой вопрос предложил использовать withRouter, но я сделал это.Что я пропустил?

1 Ответ

0 голосов
/ 18 сентября 2018

Я создал упрощенную версию маршрутизации с фиктивным хранилищем и работает как чудо с обоими маршрутизаторами.

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} />. Попробуйте расширить мой код, и я надеюсь, что он будет работать.

...