React router学习笔记（react框架下）

本任务是为一个使用resium开发一个3D map的web app开发一个login和register页面，此文章记录了我在开发过程中遇到的一些问题和解决方案，如果你也有类似的项目，但不知道如何下手，希望这篇文章可以给你帮助~

一. 思路和步骤

1.为login page 和register page创建wireframe（线框图）

2.为login page 和register page创建high-fidelity mock-ups(高保真度模型）

3.搭建login page和register page

4.在主页面创建导航，以便跳转到login，register page

5.设置router

二.使用工具

1.线框图：

最常用的Sketch，Fireworks...如果你去网上查可以搜到一堆看上去很高级的英文软件，但如果你只是为了设计这么简单的登录注册界面，word，PowerPoint已经足够了（如果你时间很紧张，没有必要把时间浪费在学习那些软件上）

2.高保真度模型

什么是高保真度模型（原型）

高保真原型：几乎完全按照实物来制作的原型就是高保真，原型中甚至包含产品的细节、真实的交互、UI等等。（说白了就是不用打代码就可以实现网页的全部功能）

低保真原型：粗枝大叶的画出来的原型，表达产品大致的框架。

使用软件：最主流而且好用的软件可能就是Axure了（我也没用过其他的），这里你就需要花时间去学习了，不过也不是很难，根据经验可以大致摸索出来，如果实在不会，B站有很多视频供学习。

3.编程开发

vscode

三.编程过程中的问题

有了模型之后我们就可以开始打代码了，我很快就完成了react框架下登录注册界面的创建，

最头疼的就是把他们与主页面集成。

 

1.我遇到的第一个问题就是在主页面上创建按钮（本来这是一个非常简单的事，但是当它遇到了cesium...)

不论我怎么添加button，导航，text，主页面上都不会出现我增加的内容，这时我才知道cesium下是要用另外一种语法去编程 resium！

于是我去resium官网学习如何添加元素，在加上我花了一天时间对本项目其他代码的了解，终于加上了两个简单的button

 2.第二个难点就是route了

虽然说网上有很多react router的例子，但是因为我是在一个几乎完善的项目上继续创作，所以需要读懂之前的router，在此基础上再增加你自己的router.

通过仔细分析我们的项目，我发现我们项目的路由都在一个routing.js文件中，但它原本的route很复杂，完全不是我在网上看到的样子！

但最后我还是根据我自己思路重写了原本的route，发现居然没有出错！这样我就可以继续增加login和register了！

重写后的route很简单，首先在routing.js中需要引入这些模块

import React from 'react'
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import Maps from './views/Maps';
import Login from './views/login/App.js'
import Register from './views/register/App.js'

然后返回

<Router> 
        <div>
        <Route exact path="/" component={Maps} /> 
        <Route path="/Login" component={Login} />
        <Route path="/Register" component={Register} />
        </div>
</Router>

其中Maps为你原有的homepage

  <Route exact path="/" component={Maps} /> 

这一步的exact是为了让你跳转到Login界面时homepage不会出现,如果不加exact就会出现像弹出框一样的效果

 

然后在你创建的 button 两侧加上跳转链接

 <Link to="/Login/" style={{color:'white'}}>
        <p style={{fontSize:'16px'}} text-center">Login</p>
 </Link>

这下就可以完成跳转啦！

 如果你想点击按钮返回homepage，可以在Login界面加入一个很简单的超链接

 <a href="/">BACK TO HOME</a>

这样就可以实现不同界面之前的跳转啦！！