as mentioned above, I use react-router4 to route my login. When I log in successfully, change the currentURL, stored in store and then listen to the change of store in Router, change the state, of Router with this.setState (), change the URL, of the page with History and try to cause the re-rendering of the page component. Render is indeed called, but the route does not render the component of the new corresponding URL.
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();
ReactDOM.render(<Provider store={store}>
<Routes history={history} /></Provider>, 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 path="/LoginPage" component={LoginPage}/>
<Route path="/SuccessPage" component={SuccessPage}/>
<Route path="/errorPage" component={errorPage}/>
<Route path="/*" component={errorPage}/>
</Switch>
</BrowserRouter>);
}
}
export default Routes;
:
debugging for a whole day, but to no avail, I hope you can give me some advice
< hr > update:
I was examining the lifecycle and found that after componentWillUpdate and render were executed, componentDIdUpdate did not execute.
I don"t know if there is a render error.
componentWillUpdate() {
alert("componentWillUpdate");
}
componentDIdUpdate() {
alert("componentDIdUpdate");
}
while inserting alert, into render and SuccessPage of LoginPage respectively, it is found that it is the rendering of LoginPage and alert:
.LoginPage.js
//
function LoginPage({login}) {
alert("LoginPage");
return (<div>
<Panel style={PanelStyle}>
<Image src={require("../../img/logo.png")} style={ImageStyle}/>
<div style={TitleStyle}></div>
<FormGroup>
<FormControl type="text" placeholder="" onChange={accountChange}/>
</FormGroup>
<FormGroup>
<FormControl type="password" placeholder="" onChange={passwordChange}/>
</FormGroup>
<br/>
<Button className="btn-block" bsStyle="primary" onClick={login}></Button>
</Panel>
</div>);
}
SuccessPage.js
//
function SuccessPage() {
alert("SuccessPage");
return (<div>SuccessPage
</div>);
}