【React】react-router4.0版本，路由变化，页面没有跳转

Z时代
2024-01-10
分类：技术分享

请教一下react-router 4.0版本的页面跳转问题，问题是，在页面开始装载根节点的组件，根组件是一个登陆页面，在登陆里面进行createBrowserHistory().push("/main")的操作，结果是url发生了变化，但是路由对应的组件没有出来，请问这是什么情况？
router相关代码如下：
const history = createBrowserHistory();
class DefaultLayout extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div>{this.props.children}</div>
)
}
}
ReactDOM.render(
<Router history={history}>
<div>
<Route path="/" component={WrappedNormalLoginForm}/>
<Route path="/main" component={SiderDemo}/>
</div>
</Router>, document.getElementById("react-content"))

登陆关键代码：

// js登陆方法
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
createBrowserHistory().push("/main");//装载路由
}
// ui代码<Button type="primary" htmlType="submit" className="login-form-button">登录</Button>

回答

将createBrowserHistory().push("/path")用this.props替换

看源码
node_modules/react-router-dom/BrowserRouter.js
摘取几行代码

  var _Router = require('react-router/Router');
  var _Router2 = _interopRequireDefault(_Router);
  BrowserRouter.prototype.render = function render() {
    return _react2.default.createElement(_Router2.default, { history: this.history, children: this.props.children });
  }; // 而this.history的来源是/history/createBrowserHistory模块

所以
<BrowserRouter /> 其实就是 <Router history={history} />
不需要在外部写
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory()

对应react-router4
简单写法是

import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
export class RouterMap extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/list">List</Link></li>
          </ul>
          <hr/>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/list" component={List} />
            <Route path="/detail/:id" component={Detail} />
            <Route component={NoMatch}/>
          </Switch>
        </div>
      </Router>
    );
  }
}

手动跳转，比如list页面跳转到detail页面

import React from 'react'
export default class List extends React.Component {
  constructor({ match }) {
    super();
    this.state = {
      match
    }
  }
  clickHandle(item) {
    this.props.history.push('/detail/' + item)
  }
  render() {
    const arr = [1,2,3]
    console.log(this.state.match)
    return (
      <div>
        <h3>List Page</h3>
        <ul>
          {
            arr.map((item, index) =>
              <li key={index} onClick={this.clickHandle.bind(this, item)}>{item}</li>
            )
          }
        </ul>
      </div>
    )
  }
}