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>
    )
  }
}