【规避解决】ReactJS中如何给带多个html页面的app加上路由

<!– <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> –>

<!– HtmlWebpackPlugin will generated code include index.js and vendor.bundle.js here –>

</body>

</html>

rse_web/src/pages/app.js

import React, { Component } from ‘react’;

// import { Router, Route, IndexRoute } from ‘react-router’;

// import { BrowserRouter } from ‘react-router-dom’;

import { SLASH_PUBLIC_PATH } from ‘common/config’;

import { ROUTE_PREFIX } from ‘common/define’;

import {

BrowserRouter as Router,

Route,

Link,

Switch

} from ‘react-router-dom’;

import Main from ‘./main/main’;

import Login from ‘./login/login’;

export default class App extends Component {

state = {

curUserInfo : {

isLogin: false,

name: ”

}

};

constructor(props) {

super(props);

console.log(`App constructor`);

console.log(this.state.curUserInfo);

}

render() {

console.log(`App render`);

// <IndexRoute component={Login}/>

// <Router>

// <Switch>

// <Route exact path=’/rse_web/’ component={Login}/>

// <Route path=’/rse_web/main’ component={Main}/>

// </Switch>

// </Router>

// <Router basename={SLASH_PUBLIC_PATH}>

// <Switch>

// <Route exact path=’/’ component={Login}/>

// <Route path=’/main’ component={Main}/>

// </Switch>

// </Router>

return (

</Switch>

</Router>

);

}

rse_web/src/pages/login/login.js

import React, { Component } from ‘react’;

import ‘./login.less’;

import BodyClassName from ‘react-body-classname’;

import { stopEventPropgation } from ‘lib/eventHelper’;

import PropTypes from ‘prop-types’;

import { ROUTE_PREFIX } from ‘common/define’;

export default class Login extends Component {

state = {

};

constructor(props) {

super(props);

console.log(`Login constructor`);

this.submitLogin = this.submitLogin.bind(this);

}

submitLogin(e){

//TODO: call API to login

console.log(‘Login submitLogin’);

stopEventPropgation(e);

console.log(e);

console.log(this);

console.log(this.context);

console.log(this.context.router);

console.log(this.context.router.transitionTo); //undefined

console.log(ROUTE_PREFIX.MAIN);

console.log(this.context.router.history);

console.log(this.context.router.history.go);

if (this.context.router) {

// this.context.router.history.push(‘/rse_web/main’);

// this.context.router.history.push(‘/main’);

this.context.router.history.push(ROUTE_PREFIX.MAIN);

// this.context.router.history.go(ROUTE_PREFIX.MAIN);

}

render() {

console.log(`Login render`);

let loginBodyClass = ‘hold-transition login-page’;

// <form onSubmit={this.submitLogin}>

// <div onClick={this.submitLogin}>

// <a className="rse_help" href="https://shimo.im/doc/0kbgLWxVgQYQbjMi">RSE帮助</a>

return (

</div>

</div>

</div>

</div>

<br />

<p className="rse_help">RSE帮助</p>

</a>

</form>

</div>

</BodyClassName>

);

}

router: PropTypes.object.isRequired

};

rse_web/src/pages/main/main.js

import React, { Component } from ‘react’;

import adminlteReactjs from ‘adminlte-reactjs’;

import ReactEcharts from ‘echarts-for-react’;

// import style from ‘./main.css’;

import ‘./main.css’;

// import ‘./main.less’;

import BodyClassName from ‘react-body-classname’;

import HeaderBar from ‘components/header-bar/header-bar’;

import NavigationMenu from ‘components/navigation-menu/navigation-menu’;

import MonthPicker from ‘react-month-picker’;

import ‘react-month-picker/css/month-picker.less’;

。。。

export default class Main extends Component {

state = {

isNaviBarCollapse: false,

。。。

};

constructor(props) {

super(props);

console.log(`Main constructor`);

console.log(props);

。。。

this.handleAMonthChange = this.handleAMonthChange.bind(this);

this.handleAMonthDissmis = this.handleAMonthDissmis.bind(this);

this.handleClickMonthInput = this.handleClickMonthInput.bind(this);

this.formatYearMonth = this.formatYearMonth.bind(this);

this.toggleSideNaviBarCallback = this.toggleSideNaviBarCallback.bind(this);

}

。。。

toggleSideNaviBarCallback(){

console.log(`toggleSideNaviBarCallback`);

console.log(`toggleSideNaviBarCallback: before this.state.isNaviBarCollapse=${this.state.isNaviBarCollapse}`);

let isCollapse = !this.state.isNaviBarCollapse;

this.setState({isNaviBarCollapse : isCollapse});

console.log(`toggleSideNaviBarCallback: -> this.state.isNaviBarCollapse=${this.state.isNaviBarCollapse}`);

}

generateCurBodyClass(isCollapse) {

let mainBodyClass = ‘skin-blue sidebar-mini wysihtml5-supported’;

// let curBodyClass = document.body.className;

let curBodyClass = mainBodyClass;

console.log(`generateCurBodyClass: curBodyClass=${curBodyClass}`);

let collapseName = ”;

if (document.body.clientWidth > 768){

collapseName = ‘sidebar-collapse’;

} else {

collapseName = ‘sidebar-open’;

}

let spaceCollapseName = ‘ ‘ + collapseName;

console.log(`collapseName=${collapseName},spaceCollapseName=${spaceCollapseName}`);

// //remove previous if existed

// if (curBodyClass.includes(spaceCollapseName)){

// curBodyClass = curBodyClass.replace(spaceCollapseName, ”);

// console.log(`removed previous: curBodyClass=${curBodyClass}`);

// }

if (isCollapse) {

curBodyClass += spaceCollapseName;

console.log(`added: curBodyClass=${curBodyClass}`);

}

console.log(`isCollapse=${isCollapse} -> curBodyClass=${curBodyClass}`);

return curBodyClass;

}

render() {

// console.log(adminlteReactjs);

// let ProfileCard = adminlteReactjs.ProfileCard;

// let HeaderBar = adminlteReactjs.HeaderBar;

// let NavigationMenu = adminlteReactjs.NavigationMenu;

// console.log(ProfileCard);

// <BodyClassName className={mainBodyClass}>

return (

<h1>

xxx

</h1>

</section>

。。。

</div>

</BodyClassName>

);

}

/rse_web/src/common/define.js

export const ROUTE_PREFIX = {

ROOT : `/`,

MAIN : `/main`

};

rse_web/src/common/config.js

export const PUBLIC_PATH = ‘rse_web’;

export const SLASH_PUBLIC_PATH = `/${PUBLIC_PATH}`;

最开始进入首页：

http://localhost:4000/rse_web/

加载的Login页面：

点击登录后，进去Main主页：

点击退出登录，回到登录页面：

转载请注明：在路上 » 【规避解决】ReactJS中如何给带多个html页面的app加上路由

Post Views: 1,268

【规避解决】ReactJS中如何给带多个html页面的app加上路由

与本文相关的文章

Hi，您需要填写昵称和邮箱！