之前,我们尝试了类似 tab选项卡功能的路由学习;
现在我们来看下基本的各个页面间的路由的实现;
下面实现一个基础的四个页面的项目的路由的处理:
我们默认进入首页 home, 也就是访问根目录的时候进入home 页面;
当我们在地址栏中输入 /Intro 的时候,我们进入介绍页面;
当我们在地址栏中输入/Func 的时候,我们进入功能页面;
当我们在地址栏中输入/Show 的时候,我们进入展示页面;
第一步: 使用 create-react-app 创建一个测试的项目,我在 f 盘下面创建了react-app-delete 目录,然后再这个
react-app-delete 目录下使用命令 create-react-app my-app-do 创建my-app-do 这个测试项目;
我们按照上面的提示,先使用命令 cd my-app-do 进入我们创建的 my-app-do 项目;
再使用命令 npm start 启动这个项目,我们 可以看到浏览器中正常启动即可,项目没有问题;
第二步: 使用 create-react-app 命令创建的项目本身有默认的显示的页面,所以我们需要修改下;
我们先打开项目my-app-do,生成的默认的项目的首页是通过 src/index.js 文件渲染的 App.js;
也就是说这个默认生成的首页是 src/App.js 文件,这个文件通过 src/index.js 挂载到 public
下的Index.html中;
我们舍弃这个默认生成的页面 src/App.js
然后我们首先在 src 目录下创建 Pages 目录,用来放置几个新加的页面;
我们在Pages下创建一个首页的 home 组件,也就是首页的页面,
创建一个简介组件 intro;
再创建一个功能组件 func ,
最后创建一个展示组件 show;
几个需要跳转的页面写好了,再增加一个路由的组件,用来实现项目的路由,在src目录下
创建 Router目录,增加 Router目录中创建 router.js文件;
上面目录和文件创建完成之后的项目目录结构如下:
上面新增文件和代码如下:
1. func.js
import React from 'react';
import './func.css';
export default class Func extends React.Component {
render(){
return(
<div>我是功能页面</div>
)
}
}
2.home.js
import React from 'react';
import './home.css'
export default class Home extends React.Component {
render(){
return(
<div>我是首页文件</div>
)
}
}
3.intro.js
import React from 'react';
import './intro.css';
export default class Intro extends React.Component {
render(){
return(
<div>我是简介页面</div>
)
}
}
4.show.js
import React from 'react';
import './show.css';
export default class Show extends React.Component {
render(){
return(
<div>我是展示的页面</div>
)
}
}
其余的样式文件都是空,func.css home.css intro.css show.css ,我在每个组件的页面中只是添加了一句话,
所以没有设置任何的样式,你可以自己设置相应的样式即可;
5.router.js
import React from 'react';
import {BrowserRouter as Routerme, Route, Link, Switch} from "react-router-dom";
import Home from '../Pages/Home/home';
import Intro from '../Pages/Intro/intro';
import Func from '../Pages/Func/func';
import Show from '../Pages/Show/show';
export default class Router extends React.Component {
render(){
return(
<Routerme>
<Switch>
<Route exact={true} path="/" component={Home}></Route>
<Route path="/Intro" component={Intro}></Route>
<Route path="/Func" component={Func}></Route>
<Route path="/Show" component={Show}></Route>
</Switch>
</Routerme>
)
}
}
上面就是我们需要增加的文件;
除了上面增加的文件,我们还需要修改一下 src/index.js 文件;
默认生成的项目默认渲染了 App 这个组件作为显示的页面,我们现在把我们写好的路由组件 Router 作为渲染的对象;
也就是 React.DOM 的对象改为 <Router/.>组件就可以了;
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Router from './Router/router';
import * as serviceWorker from './serviceWorker';
// ReactDOM.render(<App />, document.getElementById('root')); 原先的代码
ReactDOM.render(<Router/>,document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
做完上面的工作;
我们在浏览器中可以看到地址栏是:http://localhost:3000/ ,显示的内容是:我是首页文件
我们修改地址栏:http://localhost:3000/intro ,显示的内容是:我是简介页面
其余的页面也是同理;
上面的路由实现了默认显示首页,然后我们修改路由地址可以改变显示的页面;
下一篇我们尝试默认显示首页,然后在首页中点击跳转相应的页面的处理;