import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom' //把最外层包裹起来
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
function App() {
return (
// Switch 当匹配到detail就不会继续往下执行了
// Redirect 重定向谁都不匹配去index
// 从最开始的注册的路由开始匹配，有二级路由不能开启严格模式
<Layout className="demo-layout-l">
<Body>
<Sider>
<Menu >
<Menu.SubMenu title="首页">
<NavLink to='/index'>首页</NavLink>
</Menu.SubMenu>
<Menu.SubMenu title="Home">
<NavLink to='/home'>Home</NavLink>
</Menu.SubMenu>
<Menu.SubMenu title="Detail">
<NavLink to='/detail'>Detail</NavLink>
</Menu.SubMenu>
</Menu>
</Sider>
<Content>
<Switch>
<Route path="/index" component={Index} />
<Route path="/home" component={Home} />
<Route exact path="/detail" component={Detail} />
{/* <Route path="/detail" component={Test} /> */}
<Redirect to="/index" component={Index} />
</Switch>
</Content>
</Body>
</Layout>
);
}
export default App;
三种路由的传参方式
<Card>
<Card.Body>首页内容</Card.Body>
<div>
{arr.map((item, index) => {
return (
<div key={index}>
{/* 第一种传参match */}
<div style={{ cursor: 'pointer', color: 'blue' }}
onClick={() => {
props.history.push(`/index/detail/${item.id}/${item.title}`)
}}
>{item.title}</div>
{/* <Link to={`/index/detail/${item.id}/${item.title}`}>{item.title}</Link> */}
{/* 第二种传参search */}
{/* <Link to={`/index/detail?id=${item.id}&title=${item.title}`}>{item.title}</Link> */}
{/* 第三种传参state,replace不留下痕迹 */}
{/* <Link replace to={{ pathname: '/index/detail', state: { id: item.id, title: item.title } }}>{item.title}</Link> */}
</div>
)
})}
</div>
<br />
<Route path='/index/detail/:id/:title' component={indexDetail} />
{/* <Route path='/index/detail' component={indexDetail} /> */}
{/* <Route path='/index/detail' component={indexDetail} /> */}
</Card>
三种接收路由的方式
import React, { } from "react";
// import Test from "./component/Test";
import "@tencent/tea-component/dist/tea.css";
import qs from "query-string" //转换search
import Yinam from "./yiban"
function indexDetail(props) {
console.log(props)
const { id, title } = props.match.params
// const { id, title } = qs.parse(props.location.search)
// const { id, title } = (props.location.state)
// console.log(id)
const arr = [
{ id: '01', desc: '你好少' },
{ id: '02', desc: '洒洒水' },
{ id: '03', desc: '你好的撒范德萨范德萨范德萨少' }
]
const sasa = arr.find((item) => {
return item.id === id
})
const sa = { sasa: 'sasa', ddfd: 'dsa' }
const sa1 = '?id=dsad&dsds=132'
console.log(qs.stringify(sa))
console.log(qs.parse(sa1))
return (
<div>
<div>id:{id}</div>
<div>title:{title}</div>
<div>conso:{sasa.desc}</div>
<Yinam></Yinam>
</div>
);
}
export default indexDetail;
两种路由的区别
企业微信截图_16517423783232.png
import React, { } from "react";
import "@tencent/tea-component/dist/tea.css";
import {withRouter} from "react-router-dom"
//withRouter 能让一般组件有路由组件的三个参数
function yibanDetail(props) {
console.log(props)
return (
<div>
一般组件
</div>
);
}
export default withRouter(yibanDetail);
