Redirect重定向

前进后退不可使用  (独立页面相似意思）

普通式重定向

1.设置route

<Route path="/home/"  component={Home}/>

2.书写组件

import React, { Component } from 'react'


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

3.书写Redirect

 render(){
        return(
            <>
            <Redirect to="/home/"/>
        <h2>Simoon</h2>
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return(
                        <li key={index}>
                            <Link to={'/list/'+item.cid}>{item.title}</Link></li>
                    )
                })
            }
        </ul>
        </>
        )
    }

编程式重定向

constructor(props){
        super(props);
        this.state={
            list:[
                {cid:123,title:'Simoon的个人博客1'},
                {cid:456,title:'Simoon的个人博客2'},
                {cid:789,title:'Simoon的个人博客3'}
            ]
        }
        this.props.history.push("/home/")
    }

完整代码

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


class Index extends Component{
    constructor(props){
        super(props);
        this.state={
            list:[
                {cid:123,title:'Simoon的个人博客1'},
                {cid:456,title:'Simoon的个人博客2'},
                {cid:789,title:'Simoon的个人博客3'}
            ]
        }
        this.props.history.push("/home/")
    }
    render(){
        return(
            <>
            {/* <Redirect to="/home/"/> */}
        <h2>Simoon</h2>
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return(
                        <li key={index}>
                            <Link to={'/list/'+item.cid}>{item.title}</Link></li>
                    )
                })
            }
        </ul>
        </>
        )
    }
}
export default Index