react router官方文档_Vue 转React开发过程 （快速上手）

简单看了下React文档 凭借开发vue几年经验的自信就去仿vue的一个后台系统使用react开发

我喜欢这种边做边学的学习方式

小白一个 记录成长过程 大佬勿喷

第一步 搭建环境

react文档中会有详细的教程 这里我就不多说了 链接给你

入门教程: 认识 React – React​react.docschina.org

第二步 路由（简单版--下面放嵌套版）

APP.js

注意 Router 标签只能有一个 并且要包住所有 Switch Link Route

import React from "react";
import {BrowserRouter as Router, Route, Redirect, Switch, Link} from 'react-router-dom';
import LayoutCom from './Layout/index'

import "./App.css";
import Login from "./login/index";
import Home form "./home/index"
import NotFund from "./notFund/index"

const routes = [
  { path: '/', component: Home, title: '首页' },
  { path: '/login', component: Login },
  { path: '*', component: NotFund }
]

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <div className="nav">
            <ul>
              {routes.map(item => {
                if (item.path === '*' || item.path === '/login') return null
                return (
                <li><Link to={item.path}/>{item.title}</li>
                )
              })}
            </ul>
          </div>
          <div className="content">
            {/* 这里的作用可以理解为vue中的router-view */}
            <Switch>
              {routes.map(item => {
                return (
                  <Route path={item.path} exact component={item.component}/>
                )
              })}
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

嵌套路由 等同于vue中的：

const routes = [
  { path: '/', redirect: '/app' },
  {
    path: '/app',
    component: Layout,
    children: [
      { path: '/app/details', component: Details }
    ]
  },
  { path: '*', component: NotFund }
]

对应React中写法 APP.js

class App extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path='/login' component={Login}></Route>
          <Route path='/app' component={LayoutCom}></Route>
          <Route exact path='/' component={() => <Redirect to='/app'></Redirect>}></Route>
          <Route exact path="*" component={NotFund}/>
        </Switch>
      </Router>
    );
  }
}

LayoutCom.js

import React from 'react'
import {Route, Link, Switch} from 'react-router-dom';
import { Layout, Menu, Breadcrumb } from "antd";
import {
  DesktopOutlined,
  PieChartOutlined
} from "@ant-design/icons";

import Home from '../home/index';
import Detail from '../detail/index';
import NotFund from '../notFund/index';

const { Header, Content, Footer, Sider } = Layout;
class LayoutCom extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  };
  render () {
    const { collapsed } = this.state;
    return (
      <Layout style={{ minHeight: "100vh" }}>
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className="logo" >崔二莲</div>
          <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
            <Menu.Item key="1" icon={<PieChartOutlined />}>
              <Link to="/app">首页</Link>
            </Menu.Item>
            <Menu.Item key="2" icon={<DesktopOutlined />}>
              <Link to="/app/detail">详情</Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content style={{ margin: "0 16px" }}>
            <Breadcrumb style={{ margin: "16px 0" }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <Switch>
              <Route exact path="/app" component={Home}/>
              <Route exact path="/app/detail" component={Detail}/>
              <Route exact path="/*" component={NotFund}/>
            </Switch>
          </Content>
          <Footer style={{ textAlign: "center" }}>
            Ant Design ©2018 Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    )
  }
}
export default LayoutCom

后续继续更新 一起学习 一起成长