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