快速开始

npm  install -g create-react-app 
create-react-app demo-app  
cd demo-app

安装

npm install react-router-dom

项目构建

删去src目录下的所有文件，

build                   // 编译目录
config                  // webpack配置
public                  // 公共文件 可以放一些第三方字体 样式库等
scripts                 // 启动脚本
src
  |-- asset             // 静态资源
  |-- components        // 公共组件目录 当业务需要拆分组件的时候，可以在对应的业务文件夹下单独创建一个components文件夹
  |-- models            // 公共model存放位置
    |-- index.js        // model 入口文件，所有的业务model都需要在这里登记才可以使用
  |-- pages             // 容器组件
    |-- demo            // 业务容器
      |-- DemoPage.jsx  // 业务入口 我们约定入口文件后都带一个“Page”字样
      |-- DemoPage.less // 业务样式
      |-- demoModel.js  // 业务Model 如果当前业务需要拆分成多个业务可以创建一个models文件夹在统一存放
      |-- demoApi.js    // 业务api 如果当前业务需要拆分成多个业务可以创建一个services文件夹在统一存放
  |-- services          // 公共api存放
  |-- utils             // 工具
  |-- global.less       // 样式变量 方法
  |-- index.js          // 入口文件
  |-- index.less        // 全局样式 覆盖样式
  |-- router.js         // 基础路由
.eslintignore          // eslint过滤文件清单
.eslintrc.js            // eslint配置
.gitignore
package.json  
README.md

新建新建index.js 和 App.js文件

src
  |--index.js
  |--App.js

index.js

/**
  This CodeSandbox has been automatically generated using
  `codesandboxer`. If you're curious how that happened, you can
  check out our docs here: https://github.com/codesandbox/codesandboxer

  If you experience any struggles with this sandbox, please raise an issue
  on github. :)
*/
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

// This site has 3 pages, all of which are rendered
// dynamically in the browser (not server rendered).
//
// Although the page does not ever refresh, notice how
// React Router keeps the URL up to date as you navigate
// through the site. This preserves the browser history,
// making sure things like the back button and bookmarks
// work properly.

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        {/*
          A <Switch> looks through all its children <Route>
          elements and renders the first one whose path
          matches the current URL. Use a <Switch> any time
          you have multiple routes, but you want only one
          of them to render at a time
        */}
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

// You can think of these components as "pages"
// in your app.

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}