zoukankan      html  css  js  c++  java
  • react创建项目学习基础语法react路由的简单应用(五)

    1.npm install -g create-react-app 创建新项目

    2.npm install --save react-router-dom 安装路由

    3.组建测试代码测试组件

    import React, { Component } from 'react'
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    import TestPage1 from './TestPage1'
    import TestPage2 from './TestPage2'
    
    // 创建ReactRouterTest组件
    export default class ReactRouterTest extends Component {
      render() {
        return (
          <div>
            <Router>
              <ul>
                  <li> <Link to="/">页面一</Link> </li>
                  <li><Link to="/page2/123">页面二</Link> </li>
              </ul>
              <Route path="/" exact component={TestPage1} />
              <Route path="/page2/:id" component={TestPage2} />
            </Router>
          </div>
        )
      }
    }
    
    
    // function Page1() {
    //   return <h2>page1</h2>;
    // }
    
    // function Page2() {
    //   return <h2>page2</h2>;
    // }
    import React, { Component } from 'react'
    
    // TestPage1组件
    export default class TestPage2 extends Component {
      render() {
        return (
          <div>
            <p>111111111</p>
          </div>
        )
      }
    }
    import React, { Component } from 'react'
    import { Link, Redirect } from "react-router-dom";
    
    // TestPage2组件
    export default class TestPage2 extends Component {
      constructor(props) {
        super(props);
        this.state = { 
            list:[
                {id:1,name:'react'},
                {id: 2, name: 'vue-2'},
                {id:3,name:'vue-3'},
            ]
        }
        // this.props.history.push("/");  // 编程式重定向
      }
      // 标签式重定向:就是利用<Redirect>标签来进行重定向,业务逻辑不复杂时建议使用这种。
      // 编程式重定向:这种是利用编程的方式,一般用于业务逻辑当中,比如登录成功挑战到个人中心
      componentDidMount(){
        console.log(this.props.match) // 路由参数
      }
      render() {
        return (
          <div>
            {/* 标签式重定向 */}
            {/* <Redirect to="/" /> */}
            <p>22222222</p>
            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <li key={index}> 
                              <Link to={'/page2/'+item.id}> {item.name}</Link> 
                            </li>
                        )
                    })
                }
            </ul>
          </div>
        )
      }
    }
  • 相关阅读:
    vue视图更新---this.$set方法
    v-bind绑定属性样式——class的三种绑定方式
    摸鱼玩PS
    introduce to reinforcement learning ppt
    difference between sparse_softmax_cross_entropy_with_logits and softmax_cross_entropy_with_logits
    Tensorflow Keras tutotrials01
    一句话
    String字符串相关方法
    算是日记吧
    骑行入门
  • 原文地址:https://www.cnblogs.com/lhl66/p/12511507.html
Copyright © 2011-2022 走看看