react --- 项目创建、路由配置、监听路由

一、创建项目：create-react-app name

二、路由配置
1、新建router目录，新建index.js、router.js
index.js：

// 加载路由视图组件得函数组件 -加载条件-路由路径对应路由视图组件 一一对应得关系   --->获取路由配置表
import React from "react";
// 引入路由内置组件
import { Route } from "react-router-dom";
const RouterView = (props) => {
  // 函数组件得props属性
  // console.log(props.routes); // 获取路由配置表
  // 一一对应关系  遍历
  return props.routes.map((item, index) => {
    // 路由对象   加载路由视图组件
    // console.log(item)
    return (
      <Route
        key={index}
        path={item.path}
        render={(routeProps) => {
          // routeProps 路由元信息
          // 判断当前得路由对象是否存在子路由
          if (item.children) {
            // 存在路由嵌套    递归函数
            return <item.component {...routeProps} routes={item.children} />;
          } else {
            // 不存在路由嵌套
            // console.log(item);
            // console.log(routeProps);
            return <item.component {...routeProps} />;
          }
        }}
      />
    );
  });
};
export default RouterView;

router.js

import Home from "../page/home";
import Faq from "../page/faq";
import Map from "../page/map";
import childone from '../page/faqChild1'
import childtwo from '../page/faqChild2'
let routes = [
  {
    path: "/home",
    component: Home,
    exact: true,
    meta: {
      title: "首页",
    },
  },
  {
    path: "/fag/:id",
    component: Faq,
    // exact: true,
    children: [
      {
        path: "/fag/childone",
        component: childone,
      },
      {
        path: "/fag/childtwo",
        component: childtwo
      },
    ],
    meta: {
      title: "fag",
    },
  },
  {
    path: "/map",
    component: Map,
    // exact: true,
    meta: {
      title: "地址",
    },
  },
];

export default routes;

有嵌套路由时：主组件

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// import "react-router-redux";
export default class home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount(){
    console.log(this.props)
  }
  goSet(i) {
    // console.log(this.props.history);
    this.props.history.push("/fag/childtwo");
  }
  render() {
    let {routes } = this.props;
    return (
      <div>
        faq
        <button onClick={this.goSet.bind(this, 123)}>激活按钮</button>
        <div className="child">
          {routes.map(({ path, component, exact = true }, key) => {
            return (
              <Route
                exact={exact}
                key={key}
                path={path}
                component={component}
              />
            );
          })}
        </div>
      </div>
    );
  }
}

三、监听路由

app.js

// withRouter用于存放路由与props内
import { withRouter } from "react-router-dom";

componentWillMount() {
    if (this.props.location.pathname === "/") {
      this.props.history.push("/home");
    }
    this.props.history.listen((i) => {
      if (i.pathname === "/") {
        this.props.history.push("/home");
      }
    });
  }

export default withRouter(App);

index.js

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);