react 路由小案例

 

 父组件AppRouter

import React from 'react'
//BrowserRouter as Router 给BrowserRouter起名Router 方便使用
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import Index from './Index'
import List from './List'
import Home from './Home'


function AppRouter(){
    return <Router>
        {/* Link相当于a标签 */}
        <ul>
            <li><Link to='/'>首页</Link></li>
            <li><Link to='/list/sss'>列表</Link></li>
            <li><Link to='/home'>Home</Link></li>
        </ul>
        {/* exact严格匹配 */}
        {/* 匹配到哪个组件 */}
        <Route path='/' exact component={Index} />
        <Route path='/list/:id'  component={List} />
        <Route path='/home'  component={Home} />
    </Router>
}

export default AppRouter;

Index.js

import React, { Component } from 'react';
import { Link,Redirect  } from "react-router-dom";


//重定向 打开index就定向到Home组件
class Index extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
                {cid:123,title:'小羽的个人博客-1'},
                {cid:456,title:'小羽的个人博客-2'},
                {cid:789,title:'小羽的个人博客-3'},
            ]
         }
         this.props.history.push("/");   //编程式重定向
    }
    render() { 
        return (
            <ul>
                {/* 标签式重定向 */}
                 <Redirect to="/" />
                {
                    this.state.list.map((item,index)=>{
                        return(
                            <li key={index}>
                                {/* 路由传值 */}
                                 <Link to={'/list/'+item.cid}> {item.title}</Link>  
                            </li>
                        )
                    })
                }
            </ul> 
        );
    }
}
 
export default Index;

List.js

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>我是List组件 {this.state.id}</h2> );
    }

    componentDidMount(){
        console.log(this.props.match)  //接收router传值
        let tempId=this.props.match.params.id
        this.setState({id:tempId })
    }
}
 
export default List;

Home.js

import React, { Component } from 'react';
// import { Link } from "react-router-dom";

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
           
         }
    }
    render() { 
        return (
            <div>
                <h2>我是Home组件</h2>
            </div> 
        );
    }
}
 
export default Home;