Fix React-Router4

Author: xxxsf

build/asset-manifest.json

@@ -13,15 +13,12 @@
   "dependencies": {
     "antd": "^3.4.0",
     "babel-plugin-import": "^1.1.1",
-    "bizcharts": "^3.1.10",
-    "classnames": "^2.2.5",
-    "constant-mirror": "^1.1.1",
     "js-cookie": "^2.1.4",
     "react": "^16.6.3",
-    "react-copy-to-clipboard": "^5.0.0",
     "react-dom": "^16.6.3",
     "react-redux": "^5.0.6",
     "react-router": "^3.0.2",
+    "react-router-dom": "^4.3.1",
     "react-router-redux": "^4.0.8",
     "redux": "^3.7.2",
     "redux-actions": "^2.2.1",

build/favicon.ico

@@ -0,0 +1,93 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Route, Switch, Redirect } from "react-router-dom";
+import { Layout, Menu, Dropdown, Icon } from "antd";
+
+import App from "./containers/index";
+import HomePage from "./containers/homePage/index.tsx";
+import SubPage from "./containers/subPage/index";
+import Login from "./containers/login/index";
+
+const { Header, Content, Footer } = Layout;
+
+export default class EnrtyRouter extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  handleMenuClick = e => {
+    if (e.key === "exit") {
+      sessionStorage.removeItem("access_token");
+      window.location.hash = "login";
+    }
+  };
+
+  renderMainPage() {
+    let selectMenu = window.location.hash.split("/")[1]
+      ? window.location.hash.split("/")[1]
+      : "homePage";
+
+    const menu = (
+      <Menu onClick={this.handleMenuClick}>
+        <Menu.Item key="exit">exit</Menu.Item>
+      </Menu>
+    );
+
+    return (
+      <React.Fragment>
+        {/* Header */}
+        <Header className="header">
+          <Menu
+            theme="dark"
+            mode="horizontal"
+            defaultSelectedKeys={["homePage"]}
+            style={{ lineHeight: "64px" }}
+            selectedKeys={[selectMenu]}
+          >
+            <Menu.Item key="homePage">
+              <Link to="/">HomePage</Link>
+            </Menu.Item>
+            <Menu.Item key="subPage">
+              <Link to="/subPage">SubPage</Link>
+            </Menu.Item>
+
+            <Menu.Item key="user" style={{ float: "right" }}>
+              <Dropdown overlay={menu} onClick={this.handleMenuClick}>
+                <a className="ant-dropdown-link">
+                  Guest<Icon type="down" />
+                </a>
+              </Dropdown>
+            </Menu.Item>
+          </Menu>
+        </Header>
+
+        {/* main content */}
+        <Switch>
+          <Route
+            exact
+            path="/"
+            component={() => {
+              if (!sessionStorage.getItem("access_token")) {
+                return <Redirect to="/login" />;
+              } else {
+                return <HomePage />;
+              }
+            }}
+          />
+          <Route path="/subPage" component={SubPage} />
+          <Route path="/login" component={Login} />
+        </Switch>
+        
+      </React.Fragment>
+    );
+  }
+
+  render() {
+    const isAuthenticated = sessionStorage.getItem("access_token");
+    return (
+      <React.Fragment>
+        {isAuthenticated ? this.renderMainPage() : <Login />}
+      </React.Fragment>
+    );
+  }
+}

build/index.html

@@ -1,16 +1,17 @@
 /**
- * Created by Allan on 06/24/2018
+ * 有关于 mock 数据！！！
+ * 接口请求地址必须与 ./scripts/server.js 中接口地址保持一致
  */
 import cFetch from "../../utils/cFetch";
 import { GET_V1_SONG } from "./actionTypes";
 
 export const fetchList = () => (dispatch:any) => {
-  // 此处接口地址必须与 scripts/server.js mock中地址一致
   return new Promise((resolve, reject)=>{
     cFetch("/v1/main/list", { method: "POST" })
       .then((result: any) => {
         // store the result to redux
         dispatch({ type: GET_V1_SONG, result });
+        // export result to outside
         resolve(result||{success: "ok"})
       })
       .catch(()=>{

build/main.js

@@ -4,37 +4,28 @@
 import React from "react";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
-import { withRouter } from "react-router";
 import { Layout } from "antd";
 import { Props, State } from "./type";
-import styles from "./index.style";
-
-import { fetchList } from "./action"
+import styles from "./index.style"; // css modules
+import { fetchList } from "./action";
 
 class App extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-        msg: "This is a TypeScript Example!",
-        num: 1,
-        // a: 11 // it will be wrong if it not be defined in typs.ts
+      welcomeText: "Welcome to React!",
+      num: 1
     };
   }
 
-  componentDidMount(){
-    const { fetchList } =this.props.actions;
-    fetchList().then((res:any)=>{
-      console.log(res)
+  componentDidMount() {
+    this.props.fetchList().then((res: any) => {
+      console.log("接口返回数据:", res);
     });
   }
 
   render() {
-    console.log(this.props, "res")
-    const { homeData={} } = this.props;
-    if (!homeData.result) {
-      return null;
-    }
-
+    const { homeData = {} } = this.props;
     return (
       <Layout>
         <div className={styles.homePage}>
@@ -48,26 +39,28 @@ class App extends React.Component<Props, State> {
               alt="logo"
             />
           </a>
-          <h1>{this.state.msg}</h1>
-          <p className={styles.mp3Name}>{homeData.result.name} is from Redux's store!</p>
-          <audio controls="controls" src={homeData.result.url}></audio>
+          <h1>{this.state.welcomeText}</h1>
+          <p className={styles.mp3Name}>
+            {homeData.name} is from Redux's store!
+          </p>
+          <audio controls src={homeData.url} />
         </div>
       </Layout>
     );
   }
 }
 
-const mapStateToProps = (state:any) => ({
+const mapStateToProps = (state: any) => ({
   homeData: state.homeData
 });
 
-const mapDispatchToProps = (dispatch:any) => ({ 
-  actions: bindActionCreators(
+const mapDispatchToProps = (dispatch: any) => {
+  return bindActionCreators(
     {
       fetchList
     },
     dispatch
-  )
-});
+  );
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);

build/manifest.json

@@ -2,20 +2,12 @@
  * Created by Allan on 06/24/2018 
  */
 import { GET_V1_SONG } from "./actionTypes"
-import { HomeState } from "./type"
 
-// 初始化所有数据
-function setInitState() {
-    const data = JSON.parse(JSON.stringify({    
-      msg: "test"
-    }));
-    return data;
-}
 
-export function homeData(state: HomeState = setInitState(), action: any) {
+export function homeData(state={}, action: any) {
     switch (action.type) {
       case GET_V1_SONG:
-        return action.result;
+        return action.result.result;
       default:
         return state;
     }

build/service-worker.js

@@ -5,18 +5,19 @@
 export interface Props {
     homeData: any;
     actions: any;
+    fetchList: Function
 }
 
 export interface State {
-    msg: string;
+    welcomeText: string;
     num: Number;
 }
 
 /**
  * For reducer
  */
 export interface HomeState {
-    msg: string;
+    welcomeText: string;
     num: Number;
 }
 

build/static/media/index.948fa350.scss

@@ -2,7 +2,7 @@
  * Created by Allan on 2017/09/13.
  */
 import React from "react";
-import { Link } from "react-router";
+import { Link } from "react-router-dom";
 import { Layout, Menu, Dropdown, Icon } from "antd";
 import Login from "../containers/login/index";
 import "./index.less";
@@ -61,7 +61,7 @@ class App extends React.Component {
             </Menu.Item>
           </Menu>
         </Header>
-
+  
         {/* main content */}
         <Content className="main-layout-content">{this.props.children}</Content>
 

package.json

@@ -1,5 +1,5 @@
-.footer {
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-}
+// .footer {
+//   position: fixed;
+//   width: 100%;
+//   bottom: 0;
+// }

src/app/App.js

@@ -37,20 +37,18 @@ export class SubPage extends React.Component {
   };
 
   render() {
-    const { img, visible } = this.state;
     const { homeData={} } = this.props;
-    if (!homeData.result) {
-      return null;
-    }
+    const { img, visible } = this.state;
+    
     return (
       <div className="sub-page">
         <img src={img} alt="" />
         <Button onClick={this.showModal}>Click to open a modal</Button>
 
         <p className="mp3-title">
-          {homeData.result.name} is from Redux's store!
+          {homeData.name} is from Redux's store!
         </p>
-        <audio controls="controls" src={homeData.result.url}>
+        <audio controls="controls" src={homeData.url}>
           Your browser does not support the audio tag.
         </audio>