全局安装 create-react-app
npm install create-react-app -g
创建项目
在全局安装了create-react-app 后 创建项目,如果按照下面的第一种办法创建不成功,可以使用第二种办法
create-react-app react01
// 或者
npx create-react-app react01
使用路由
- 下载路由模块
npm i react-router-dom -s
为实现路由懒加载 安装 react-loadable
npm i react-loadable -s
- 创建页面
在 src 目录下创建 pages文件,测试文件目录如下
pages => index.js代码
import Loadable from 'react-loadable';
import { ActivityIndicator } from 'antd-mobile';
const Home = Loadable({
loader: () => import('./home'),
loading: ActivityIndicator
});
const Cate = Loadable({
loader: () => import('./cate'),
loading: ActivityIndicator
});
export {
Home,
Cate
}
- 在 src 目录下创建创建routes.js
import {
Home,
Cate
} from './pages'
const routes = [
{
url: '/home',
component: Home,
text: '首页',
isToggleFooter:true,
isShowHeaderAndFooter: true
},
{
url: '/cate',
component: Cate,
text: '分类',
isToggleFooter:true,
isShowHeaderAndFooter:true
}
]
export default routes
- 在 app.js引入router模块和routes.js文件
import React, { Component, Fragment } from 'react';
import {
Route,
Redirect,
Switch
} from 'react-router-dom'
import routes from './routes'
class App extends Component {
render() {
return (
<Fragment>
<header>Header</header>
<Switch>
{
routes.map(route => {
return (
<Route
key={route.url}
path={route.url}
component={route.component} />
)
})
}
<Redirect exact from="/" to={routes[0].url} />
{/* 这里用 redirect 进行 首页自动跳转到 /home 路由下
exact 意味着精确匹配 当为 / 时才跳转 /home 不是包含 / 就跳转到 /home
*/}
{/* <Redirect to = '/all'/> */}
{/* 如果找不到页面 则去 4040页面 */}
</Switch>
<footer>尾部</footer>
</Fragment>
);
}
}
export default App;
- 在 src 最外层 index.js使用 router模块
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
import './index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Router>
<Route component = {App} />
</Router>
,
document.getElementById('root'))
路由间跳转
以home 页面为例
import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom'
export default class Home extends Component {
render() {
return (
<Fragment>
<div>我是Home页</div>
<button> <Link to="/cate">跳转到 cate 页</Link> </button>
</Fragment>
)
}
}