import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';
class A extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Component A</h1>
<p>参数:{this.props.match.params.id}</p>
<Switch>
<Route exact path={`${this.props.match.path}`} render={()=>{
return (
<div>
<p>这是未带参数的A组件</p>
</div>
)
}}/>
<Route exact path={`${this.props.match.path}/sub`} render={()=>{
return (
<div>
<p>这是Sub组件</p>
</div>
)
}}/>
<Route path={`${this.props.match.path}/:id`} render={(route) => {
return (
<div>
<p>这是带参数的A组件,参数为:{route.match.params.id}</p>
</div>
)
}}/>
</Switch>
</div>
)
}
}
class B extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>Component B</div>
)
}
}
class Wrapper extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<p><Link to="/a">组件A</Link></p>
<p><Link to="/a/123">带参数的组件A</Link></p>
<p><Link to="/a/sub">/a/sub</Link></p>
<p><Link to="/b">组件B</Link></p>
{this.props.children}
</div>
)
}
}
ReactDOM.render(
<Router>
<Wrapper>
<Route path="/a" component={A}></Route>
<Route path="/b" component={B}></Route>
</Wrapper>
</Router>,
document.getElementById('app')
);
深入了解React(二十一、路由6-带参数3)
最新推荐文章于 2023-09-14 21:31:13 发布