基础知识 - 路由
路由传参
- 动态路由传参 :
在Route组件上path属性里面以
/:key
的占位符写法,在<NavLink />组件
to属性上 动态拼接就可以啦。接收方:取值用props.match.params
- 路由传参query | state :
{pathname:'路径名', query|state:{id:'',name:''}
- 路由传参query | state :
props.history | useHistory()
.push方面里面传入一个对象,对象有两个属性,一个pathname
,一个query|state
, pathname 是跳转路径,query|state 是传参对象。
接收方: query 在props.location.query里面取 ,state 在props.location.state里面取
动态路由传参
<!-- list1.jsx -->
import React, { useMemo, useState } from "react";
import { NavLink ,useHistory} from "react-router-dom";
export default function List(props) {
console.log(props);
const [list, setlist] = useState([
{ name: "前端猛男", id: 1 },
{ name: "前端猛男2", id: 2 },
{ name: "前端猛男3", id: 3 },
]);
// 动态路由传参
const listView = useMemo(() => {
return list.map((item) => {
return (
<li key={item.id}>
{/*动态路由传参*/}
<NavLink
to={`/News/${item.id}/${item.name}`}
>
{item.name}
</NavLink>
</li>
);
});
}, [list]);
return (
<div>
<ul>
动态路由传参:
{listView}
</ul>
</div>
);
}
<!-- News.jsx -->
export default function News(props) {
console.log(props, "News文件");
// 动态路由在match属性里面取
const { id, name } = props.match.params;
return (
<div>
新闻
<div>id:{id}</div>
<div>name:{name}</div>
</div>
);
}
<!-- Home.jsx -->
import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import list1 from "./Home/list1";
import NotFounted from "./NotFounted";
export default function Home() {
return (
<div>
<Switch>
<Route path="/Home/list1" component={list1}></Route>
{/* 如果从匹配到从/Home页面过来,就重定向到list1组件 */}
<Redirect from="/Home" to="/Home/list1" exact></Redirect>
{/* 如果没有匹配的路由 显示404组件 */}
<Route component={NotFounted}></Route>
</Switch>
</div>
);
}
<!-- IndexRouter.jsx -->
import React from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import Home from "./tabber/Home";
import News from "./tabber/news";
import NotFounted from "./tabber/NotFounted";
export default function IndexRouter(props) {
return (
<div>
<HashRouter>
<Switch>
<Route path="/Home" component={Home}></Route>
{/* 动态路由传参需要来path上以/:key名的形式来定义占位数据 */}
<Route path="/News/:id/:name" component={News}></Route>
<Redirect from="/" to="/Home" exact></Redirect>
<Route path="" component={NotFounted}></Route>
</Switch>
</HashRouter>
</div>
);
}
<!-- App.jsx 根组件 -->
import React from "react";
improt ReactDom from 'react-dom';
import IndexRouter from "./view/一级路由与多级路由/IndexRouter";
export default function App() {
return (
<div>
<IndexRouter>
</IndexRouter>
</div>
);
}
ReactDom.render(<App/>,document.getElementById('root'))
路由传参 query | state
<!-- list1.jsx -->
import React, { useMemo, useState } from "react";
import { NavLink ,useHistory} from "react-router-dom";
export default function List(props) {
console.log(props);
const [list, setlist] = useState([
{ name: "前端猛男", id: 1 },
{ name: "前端猛男2", id: 2 },
{ name: "前端猛男3", id: 3 },
]);
// 路由传参 query | state
const Hisotry = useHistory();
const listView2 = useMemo(() => {
return list.map((item) => {
return (
<li key={item.id} onClick={() => RouterPush(item)}>
{item.name}
</li>
);
});
}, [list]);
const RouterPush = (item) => {
// 1. query传参
props.history.push({
pathname: "/News",
query: { id: item.id, name: item.name },
});
// 2. state传参
Hisotry.push({
pathname: "/News",
state: { id: item.id, name: item.name },
});
};
return (
<div>
<ul>
路由传参( query | state):
{listView2}
</ul>
</div>
);
}
<!-- News.jsx -->
export default function News(props) {
console.log(props, "News文件");
// query 在location.query里面取
const { id, name } = props.location.query;
// state 在location.state里面取
const { id, name } = props.location.state;
return (
<div>
新闻
<div>id:{id}</div>
<div>name:{name}</div>
</div>
);
}
<!-- Home.jsx -->
import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import list1 from "./Home/list1";
import NotFounted from "./NotFounted";
export default function Home() {
return (
<div>
<Switch>
<Route path="/Home/list1" component={list1}></Route>
{/* 如果从匹配到从/Home页面过来,就重定向到list1组件 */}
<Redirect from="/Home" to="/Home/list1" exact></Redirect>
{/* 如果没有匹配的路由 显示404组件 */}
<Route component={NotFounted}></Route>
</Switch>
</div>
);
}
<!-- IndexRouter.jsx -->
import React from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import Home from "./tabber/Home";
import News from "./tabber/news";
import NotFounted from "./tabber/NotFounted";
export default function IndexRouter(props) {
return (
<div>
<HashRouter>
<Switch>
<Route path="/Home" component={Home}></Route>
<Route path="/News" component={News}></Route>
<Redirect from="/" to="/Home" exact></Redirect>
<Route path="" component={NotFounted}></Route>
</Switch>
</HashRouter>
</div>
);
}
<!-- App.jsx 根组件 -->
import React from "react";
improt ReactDom from 'react-dom';
import IndexRouter from "./view/一级路由与多级路由/IndexRouter";
export default function App() {
return (
<div>
<IndexRouter>
</IndexRouter>
</div>
);
}
ReactDom.render(<App/>,document.getElementById('root'))