父组件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.idthis.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;