• react-router


    1 SPA

     

    1.1 Single Page Application

    1.2 页面不刷新

    2 创建项目(参考 react.org)

    3 简单的例子

     

    3.1 index.js 入口配置

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    //为了和其他的路由名称使用一致,重命名路由名 称
    import {BrowserRouter as Router} from 'react-router-dom';
    
    ReactDOM.render(
        <Router>
            <App/>
        </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: https://bit.ly/CRA-PWA
    serviceWorker.unregister();
    

    3.2 App.js

    必要的一些组件自行创建

    import React from 'react';
    
    import {Link, Route} from 'react-router-dom';
    
    import C1 from './components/C1';
    import C2 from './components/C2';
    import C3 from './components/C3';
    
    // 路由规则是匹配前缀
    // 添加 exact 要求精确匹配
    function App() {
        return (
            <div>
                <Link to='/'>p1</Link>
                <Link to={'/p2'}>p2</Link>
                <Link to={'/p3'}>p3</Link>
    
                <Route path='/' exact component={C1}/>
                <Route path={'/p2'} component={C2}/>
                <Route path={'/p3'} component={C3}/>
            </div>
        )
    }
    
    export default App;
    

    Created: 2019-11-30 周六 17:39

    Validate

  • 相关阅读:
    实时控制软件设计第一周作业-汽车ABS软件系统案例分析
    团队项目·冰球模拟器——任务间通信、数据共享等设计
    团队项目·冰球模拟器——cmake 自动化构建系统的配置文件的编写
    团队项目·冰球模拟器——文件结构设计
    团队项目·冰球模拟器——插值算法接口设计
    第四周作业
    第三周作业、实时操作系统µC/OS介绍及其它内容
    第二周作业、停车场门禁控制系统状态机
    Open Dynamics Engine for Linux 安装笔记
    第一周作业、典型实时控制系统案例分析
  • 原文地址:https://www.cnblogs.com/heidekeyi/p/11963370.html
Copyright © 2020-2023  润新知