react 项目教程 （配置路由）

创建页面

在src 界面新建pages页面 将每一个页面都写成一个组件文件夹下写index.js 如图

结构图片

安装 react-loadable 用来实现按需加载显示页面

npm i react-loadable -S

使用按需加载的组件 （详情查看 github）

//pages>index.js
import Loadable from 'react-loadable';
// import Loading from './my-loading-component';
 // 意思是在加载的时候 显示 都加载组件没有组件的时候 我们可以写为
const Loading = () => null;  //加载时不现实loading
 
const Home = Loadable({ 
  loader: () => import('./Home'), //按需加载 点击时只加载一个页面
  loading: Loading,
});
const Cart = Loadable({ 
  loader: () => import('./Cart'),
  loading: Loading,
});
const Mall = Loadable({ 
  loader: () => import('./Mall'),
  loading: Loading,
});
const Detail = Loadable({ 
  loader: () => import('./Detail'),
  loading: Loading,
});
const Mine = Loadable({ 
  loader: () => import('./Mine'),
  loading: Loading,
});
export {
  Home, Mall, Detail, Cart, Mine
}//将页面导出

此时 如果 你想引入 只需要

import { Home } from './pages' ->你的路径

创建路由

第一步：根目录创建 routes.js 从你的pages界面将配置好的组件导入到 routes

import {
  Home, Mall, Detail, Cart, Mine, Login
} from './pages' //导入页面
//通过组件配置路由
const routes = [{
  path: '/home',
  component: Home
}, {
  path: '/mall',
  component: Mall
}, {
  path: '/mine',
  component: Mine
}, {
  path: '/cart',
  component: Cart
}, {
  path: '/login',
  component: Login
}, {
  path: '/mall/detail/:id',
  component: Detail
},
];
export default routes

此时需要安装react-router-dom

https://www.npmjs.com/package/react-router-dom

npm i react-router-dom -S

安装好后我们要在最外层的index.js页面中引入BrowserRouter 和 Route

import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom'
import './index.less'
import App from './App'

ReactDOM.render(
  <Router>
    <Route component = {App} />
  </Router>
, 
document.getElementById('root'))

我们需要在要渲染的页面最外层包一个<Router> 这个路由才会显示。 Router 是路由配置 路由的配置写在 App.js 中。

为了在App.js 渲染路由， 需要在App.js 中引入 Switch , Route, Redirect //从写目录
需要引入自己配置的路由文件routes.js

在要渲染的页面的 render 中加一个Swich 标签来遍历routes.js 我们自己配置的路由信息 来设置路由
（404 的 页面也写在 pages 中 这里我没有显示出来 。但是 404 的页面和所有其他页面一样 需要在页面中创建 导出 并在routes 中配置路由 ）

import {
 Route,
 Redirect,
 Switch
} from 'react-router-dom'

import routes from './routes'
class App extends Component {
  render() {
    return (
      <div className="App">
        <header>头部</header>
          <Switch>
            {
              routes.map(route => { 
                return(
                  <Route 
                  key = {route.path}
                  path = {route.path}
                  component = {route.component}/>
                )
              })
            }
          <Redirect exact from = "/" to = {routes[0].path} />
            {/* 这里用 redirect 进行 首页自动跳转到 /home 路由下 
                exact 意味着精确匹配 当为 / 时才跳转 /home 不是包含 / 就跳转到 /home
            */}
            <Redirect to = '/404'/>
            {/* 如果找不到页面 则去 4040页面 */}
          </Switch>
         <footer>尾部</footer>
      </div>
    );
  }
}

这样 页面配置就完成来 我们需要用git 向自己 的分之提交代码 这里是一些git 命令和用法

git init ->git的初始化
git remote add origin 你的仓库地址
git checkout -b 你的分之名称
git status ->查看更改的文件
git add -A ->提交全部信息
git commit -m '详细描写提交内容'
git push origin 你的分之名称 -> 提交远程数据库

下面 我们要制作跳转路由的tabbar组件 写在components中 可以点击链接查看制作过程

https://www.jianshu.com/p/7a2fcce0ed8b