外部HTML跳转到react页面,react.js单页面跳转

react.js用js的方式实现页面跳转暂时收录了两种方式。首先路由跳转需由父组件用router={history}方法 将路由信息传递给子组件，而后在子组件绑定点击事件，

this.props.history.push('/...');

从而实现js控制页面跳转。

方法一：在同一个组件中，添加绑定事件：

routePush(){

this.props.history.push('/...');

}

其中很重要的是：

constructor (props) {

super(props);

//关键就是这里，把要使用this的函数 在构造函数中用bind方法传入this

this.routePush = this.routePush.bind(this);

}

方法二：在同一组件中，通过路由重定向Redirect进行跳转；

//引入Redirect

import { Redirect } from 'react-router-dom';

//constructor中初始化字段redirect:false

this.state = {

redirect:false

};

//点击事件，改变redirect，实现render路由重定向，

this.setState({ redirect: true });

//render()内重定向页面路由

if (this.state.redirect){

return ;

}

备注：这种方式直接重定向了原来的路由，虽然实现了跳转，但具体是否有其他问题还不确定，暂时未深入了解。