创建页面
在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
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中 可以点击链接查看制作过程
