import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/topics">
<Topics />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
// const match = useRouteMatch({
// path:"/",
// exact:true,
// strict:true,
// sensitive:true
// });
// console.log(match);
return <h2>Home</h2>;
}
function About() {
// const match = useRouteMatch("/home");
// console.log(match);
return <h2>About</h2>;
}
function Topics() {
let match = useRouteMatch();
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/topic1`}>Topic1</Link>
</li>
<li>
<Link to={`${match.url}/topic2`}>Topic2</Link>
</li>
</ul>
<Switch>
<Route path={`${match.path}/:topicId`}>
<Topic />
</Route>
<Route path={match.path}>
<h3>Please select a topic.</h3>
</Route>
</Switch>
</div>
);
}
function Topic() {
// const match = useRouteMatch();
// console.log("userRouteMatch:",match);
// const params = useParams();
// console.log("useParams:",params);
let { topicId } = useParams();
return <h3>Requested topic ID: {topicId}</h3>;
}
- Home
(localhost:3000/)
- About
(localhost:3000/about)
- Topics
(localhost:3000/topics)
- Topic1
(localhost:3000/topics/topic1)
- Topic2
(localhost:3000/topics/topic2)
- Topic1
路由配置
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
const routes = [
{
path:"/",
exact:true,
component:Home
},
{
path:"/about",
component:About
},
{
path:"/topics",
component:Topics,
routes:[
{
path:"/topics/:id",
component:Topic
},
{
path:"/topics/:id",
component:Topic
}
]
}
]
export default function App(){
return (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
{
routes.map((route,idx) =>
<RouteWithSubRoutes key={idx} {...route} />
)
}
</div>
</Router>
)
}
function RouteWithSubRoutes(route){
return <Route path={route.path}
exact={route.exact}
render={props => <route.component {...props} routes={route.routes} />} />
}
function Home(){
return <h2>Home</h2>;
}
function About(){
return <h2>About</h2>
}
function Topics({routes}){
return (
<>
<h2>Topics</h2>
<ul>
<li><Link to="/topics/topic1">Topic1</Link></li>
<li><Link to="/topics/topic2">Topic2</Link></li>
</ul>
<Switch>
{
routes.map((route,idx) => <RouteWithSubRoutes key={idx} {...route}/>)
}
</Switch>
</>
);
}
function Topic(props){
const {id} = props.match.params;
return <h3>Requested topic ID: {id}</h3>;
}
效果同上。
useRouteMatch()
useRouteMatch()
会尝试匹配当前URL。
不匹配,则返回null;
匹配,则返回一个对象。此时,可以在不实际渲染Route的情况下,访问匹配数据。
useRouteMatch()
接受的参数
- 可以是一个字符串
useRouteMatch("/home");//与当前路径`/home`是否匹配
- 也可以接受一个对象
useRouteMatch({
path:"/", //与当前路径`/`是否匹配
exact:true, //准确匹配
strict:true, //严格匹配
sensitive:true//大小写敏感
});
useParams()
同useRouteMatch()
返回的对象的params
属性,是一个键值对。
//path/:topicId
const {topicId} = useParams();
//path/topic1,topicId则等于"topic1"
//path/topic2,topicId则等于"topic2"