React 路由模块创建及使用

一、 安装router

首先安装router

$ npm install --save react-router

然后使用一个支持 CommonJS 或 ES2015 的模块管理器，例如 webpack：

/ 使用 ES6 的转译器，如 babel
import { Router, Route, Link } from 'react-router'

// 不使用 ES6 的转译器
var ReactRouter = require('react-router')
var Router = ReactRouter.Router
var Route = ReactRouter.Route
var Link = ReactRouter.Link

也可以在 unpkg 上构建 UMD 格式：

<script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script>

二、 安装react-router-dom

首先进入项目目录，使用npm安装react-router-dom：

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令

三、路由的使用

1. src下创建route文件夹，文件夹内创建index.js;
2. src/page页面下创建home文件夹，文件夹内创建home.js、home.css页面：

import React from "react";
export default class home extends React.Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
  }
  render() {
    return <div>Home</div>;
  }
}

3. route/index.js中导入home页面

import React, { Component } from "react";
import { HashRouter, Switch, Route } from "react-router-dom";
import home  from '../page/home/home';
class RouterIndex extends Component {
  render() {
    return (
      <HashRouter>
        <Switch>
          <Route exact path="/" component={home} />
        </Switch>
      </HashRouter>
    );
  }
}

export default RouterIndex;

4. app.js页面引入route/index.js文件：

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import RouterIndex from "./route/index"; //引入路由管理js
import "./App.css";

function App() {
  return (
    <div className="App">
      <RouterIndex />
    </div>
  );
}

export default App;