response-router4 изменил URL, но маршрут не соответствует новому URL для рендеринга

Question

Я пытаюсь использовать React-Router V4 для добавления маршрутов в мое приложение, я пытаюсь

программно изменить маршрут с помощью history.push (), которая обновляет

URL браузера, но маршрут по-прежнему совпадает со старым URL.

ПРИМЕЧАНИЕ. Я использую redux.

Единственный ответ на этот вопрос:

wrapЛюбой компонент, связанный с резервированием, в котором есть компоненты маршрутизатора с помощью withRouter ().

Однако я попробовал ответить на поставленный выше вопрос, и он не работает для меня.

Вот важные фрагменты:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import Routes from './Routes.js';
import store from './Store.js';
import {Provider} from 'react-redux';
import './css/bootstrap.min.css';
import './css/navbar/chartist-custom.css';
import './css/navbar/main.css';
import './css/navbar/font-awesome.min.css';
import './css/navbar/style.css';
import {createBrowserHistory} from 'history'

const history = createBrowserHistory();

const App = () => {

  return (<Provider store={store}>
    <Routes history={history}/></Provider>);
}

ReactDOM.render(<App/>, document.getElementById('root'));

registerServiceWorker();

Routes.js

import React, {Component} from 'react';
import {
  Route,
  Switch,
  Link,
  BrowserRouter,
  Router,
  Redirect
} from 'react-router-dom';
import LoginPage from './views/pages/LoginPage.js';
import SuccessPage from './views/pages/SuccessPage.js';
import errorPage from './views/pages/errorPage.js';
import store from './Store.js';

class Routes extends Component {

  constructor(props) {
    super(props);
    this.URLChange = this.URLChange.bind(this);
    this.getOwnState = this.getOwnState.bind(this);

    this.state = this.getOwnState();
  }

  getOwnState() {
    return {
      currentURL: store.getState()["currentURL"]
    };
  }

  URLChange() {
    console.debug(this.getOwnState()["currentURL"]);
    this.props.history.push(this.getOwnState()["currentURL"]);

    //setState是异步的
    let currentURL = this.getOwnState()["currentURL"];
    this.setState(Object.assign({
      currentURL
    }, {currentURL}), () => {
      //回调方法
      console.debug("1:" + this.state.currentURL)
    })

  }

  componentDidMount() {
    store.subscribe(this.URLChange);
  }

  render() {
    alert("render:" + JSON.stringify(this.props.history.location.pathname));
    return (<BrowserRouter >
      <Switch>
        <Route exact="exact" path="/" component={errorPage}/>
        <Route exact="exact" path="/LoginPage" component={LoginPage}/>
        <Route exact="exact" path="/SuccessPage" component={SuccessPage}/>
        <Route exact="exact" path="/errorPage" component={errorPage}/>
        <Route exact="exact" path="/*" component={errorPage}/>
      </Switch>
    </BrowserRouter>);
  }
}

export default Routes;

LoginPage.js ：

... export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LoginPage));

SuccessPage.js ：

... export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SuccessPage));

---

И я обнаружил, что при рендере возвращается Маршрут

<Route path="/LoginPage" component={LoginPage}/>

, а не

<Route path="/SuccessPage" component={SuccessPage}/>

---

, но можно использовать <Link>изменить вид:

<Link to="/SuccessPage">SuccessPage</Link>

Answer 1

Вам необходимо добавить точное слово в ваш основной маршрут.Нравится:

<Route exact path="/LoginPage" component={LoginPage}/>

Answer 2

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import Routes from './Routes.js';
import store from './Store.js';
import {Provider} from 'react-redux';
import './css/bootstrap.min.css';
import './css/navbar/chartist-custom.css';
import './css/navbar/main.css';
import './css/navbar/font-awesome.min.css';
import './css/navbar/style.css';
import {BrowserRouter} from 'react-router-dom';


const App = () => {
  return (<Provider store={store}>
    <BrowserRouter><Routes/></BrowserRouter>
  </Provider>);
}

ReactDOM.render(<App/>, document.getElementById('root'));

registerServiceWorker();

---

• Routers.js

import React, {Component} from 'react';
import {
  Route,
  Switch,
  Link,
  BrowserRouter,
  Router,
  Redirect,
  withRouter
} from 'react-router-dom';
import LoginPage from './views/pages/LoginPage.js';
import SuccessPage from './views/pages/SuccessPage.js';
import errorPage from './views/pages/errorPage.js';
import store from './Store.js';
import {Provider} from 'react-redux';
import PropTypes from 'prop-types'

class Routes extends Component {

  constructor(props, context) {
    super(props, context);

    this.URLChange = this.URLChange.bind(this);
    this.getOwnState = this.getOwnState.bind(this);

    this.state = this.getOwnState();
  }

  static contextTypes = {
    router: PropTypes.object
  }


  getOwnState() {
    return {
      currentURL: store.getState()["currentURL"]
    };
  }

  URLChange() {
    console.debug(this.getOwnState()["currentURL"]);

    //setState是异步的
    let currentURL = this.getOwnState()["currentURL"];
    this.setState(Object.assign({
      currentURL
    }, {currentURL}), () => {
      //回调方法
      console.debug("回调方法执行完成this.state.currentURL:" + this.state.currentURL)
      console.debug("旧的URL：" + this.context.router.history.location.pathname);
      console.debug("新的URL：" + this.getOwnState()["currentURL"]);
      //改变路由
      this.context.router.history.push(this.getOwnState()["currentURL"]);
    })

  }
  componentDidMount() {
    store.subscribe(this.URLChange);
  }

  render() {
    return (<div>
      <Link to="/LoginPage">LoginPage</Link>
      <br/>
      <Link to="/SuccessPage">SuccessPage</Link>
      <br/>
      <Link to="/errorPage">errorPage</Link>
      <br/>
      <Switch>
        <Route exact="exact" path="/" component={LoginPage}/>
        <Route exact="exact" path="/LoginPage" component={LoginPage}/>
        <Route exact="exact" path="/SuccessPage" component={SuccessPage}/>
        <Route exact="exact" path="/errorPage" component={errorPage}/>
        <Route exact="exact" path="/*" component={errorPage}/>
      </Switch>
    </div>);
  }
  componentWillUpdate() {}
  componentDIdUpdate() {}

}

export default withRouter(Routes);

Answer 3

Поскольку вы используете this.props.history.push в компоненте Routes, вам нужно обернуть этот компонент с withRouter

class Routes extends Component {

  constructor(props) {
    super(props);
    this.URLChange = this.URLChange.bind(this);
    this.getOwnState = this.getOwnState.bind(this);

    this.state = this.getOwnState();
  }

  getOwnState() {
    return {
      currentURL: store.getState()["currentURL"]
    };
  }

  URLChange() {
    console.debug(this.getOwnState()["currentURL"]);
    this.props.history.push(this.getOwnState()["currentURL"]);

    //setState是异步的
    let currentURL = this.getOwnState()["currentURL"];
    this.setState(Object.assign({
      currentURL
    }, {currentURL}), () => {
      //回调方法
      console.debug("1:" + this.state.currentURL)
    })

  }

  componentDidMount() {
    store.subscribe(this.URLChange);
  }

  render() {
    alert("render:" + JSON.stringify(this.props.history.location.pathname));
    return (<BrowserRouter >
      <Switch>
        <Route path="/LoginPage" component={LoginPage}/>
        <Route path="/SuccessPage" component={SuccessPage}/>
        <Route path="/errorPage" component={errorPage}/>
        <Route path="/*" component={errorPage}/>
      </Switch>
    </BrowserRouter>);
  }
}

export default withRouter(Routes);