react前端项目构建之【路由基础篇】

前言：前言都是废话，需认真阅读

• 概念

  • 单页面应用
    什么是单页面应用，其实这个概念在学习reactjs的时候就应该要明确的。在web应用程序里面（纯属个人见解，仅供参考有异议也没用），多数是：

    1.浏览器发出一个url请求；
    2.后端程序渲染html并返回；
    3.浏览器根据html加载js、css等静态文件，请求获取数据并渲染页面。

    这么从一个url请求到展示出来的页面这个流程就是一个应用页面，以往的应用都是由很多个这样的流程组成，即由很多个url请求对用很多个html页面组成的，通俗地理解这就是多页面应用。
    那么显而易见的，单页面应用只有一个这么样的流程，也就是我们的应用后台只返回一个html页面。

  • history
    那么问题来了，单页面应用只有一个html怎么 生成 和 管理 多个显示页面（这里的显示页面不是一个html页面，而是指一个浏览器最终的显示页面）呢？
    通过js代码控制DOM的显示应该可以生成多个显示页面，那么 管理 呢？用js代码自己控制也可以，比如点击这个A按钮就显示A页面，B按钮显示B页面；好像很简单没什么问题。

    然后用户来使用了，“喂！这里(B页面)能后退返回到刚刚的(A页面)吗？”
    然后你回答，“点击A按钮啊！”
    然后老板要求添加新需求，添加页面访问历史记录列表能向前、后退、跳转！

    那么要实现向前、后退、跳转等操作，很容易想到的就是：能否利用浏览器history的向前、后退、跳转等操作来实现我们的需求呢？因为浏览器本身就有这样的操作接口，这样我们就不用自己开发历史记录队列或栈来实现了！
    于是基于history的react-router来了,请看文档：react-router中文文档
    react-router解决了url与显示页面的对应关系，通过访问特定的url就能显示特定的显示页面，还能向前、后退、跳转！

    说了半天，主角原来不是history而是react-router！不过从实现原理来看，react-router是基于hisotry来实现的！

• 实战
  简单的登陆页面以及主页
  听说React Router 实现自定义的 history有三种，先不管了！自行参透领悟history文档。

  1. 我们就用官方推荐的browserhistory，按照reactjs一切皆为组件的思想, 直接引入BrowserRouter，修改src/index.js文件如下：

  import React from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter } from 'react-router-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  
  ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>, 
  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: https://bit.ly/CRA-PWA
  serviceWorker.unregister();
  

  2.在src目录下创建pages目录，并创建登陆页面与主页文件，如下：

  
  目录结构图.png
  

  修改src/pages/home/index.js

  import React from 'react';
  import { Button } from 'antd';
  
  const HomePage = () => {
    return (
      <div>
          <h1>home page</h1>
          <Button type='primary'>button </Button>
      </div>
    );
  }
  
  export default HomePage;
  

  修改src/pages/login/index.js

  import React from 'react';
  import { Link } from 'react-router-dom';
  import { Input, Button } from 'antd';
  
  const LoginPage = () => {
    return (
       <div>
          <h1>login page</h1>
          <span>user</span> 
          <Input></Input>
          <span>pass</span> 
          <Input></Input>
          <Link to='/home'>
              <Button type='primary'> login </Button>
          </Link>
     </div>
    );
  }
  export default LoginPage;
  

  修改src/App.js文件如下：

  import React from 'react';
  import { Route } from 'react-router-dom';
  import LoginPage from './pages/login';
  import HomePage from './pages/home';
  import './App.css';
  
  function App() {
    return (
      <div className="App">
        <Route path="/" component={LoginPage} exact />
        <Route path="/login" component={LoginPage} />
        <Route path="/home" component={HomePage} />
      </div>
    );
  }
  
  export default App;
  

  运行程序默认访问/：
  

  访问/.png
  修改url地址，访问/login：
  访问/login.png
  点击login按钮，跳转到/home：
  访问/home.png
  好了，到此使用react-router创建的简单的登陆页面与主页以及完成，虽然界面好粗超。

  上一篇 下一篇