react-router4 更改了 URL，但路由与要呈现的新 URL 不匹配

Question

我正在尝试使用React-Router V4向我的应用程序添加路由，我正在尝试

使用 history.push(( 以编程方式更改路由，它正在更新

浏览器网址 ，但路由仍与旧网址匹配。

注意：我正在使用 redux。

关于这个问题的唯一答案是：

包装任何内部包含路由器组件的 Redux 连接组件 它带有一个withRouter((。

但是，我已经尝试了上述问题的答案，但它对我不起作用。

以下是重要的片段：

索引.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();

路线.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;

登录页面.js：

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

成功页面.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

由于您在路由组件中使用this.props.history.push，因此您需要用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);

Answer 2

您需要在主路由中添加"exact"关键字。喜欢：

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

Answer 3

• 索引.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();

---

• 路由器.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);