react-router-dom直接结构hashHistory没办法使用

最新推荐文章于 2024-12-08 10:10:18 发布

原创最新推荐文章于 2024-12-08 10:10:18 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react-router-dom

本文介绍了react-router-dom(react-router4)的基本用法，包括BrowserRouter和HashRouter的选择，通过一个示例展示了如何创建定制的链接组件，使其在URL与链接指向的URL相同时显示特殊样式。同时，文章详细解释了Switch、Route、Link和useRouteMatch等关键组件的使用方法。

react-router-dom(react-router4)中有一个 BrowserRouter 或是 HashRouter 任选其一就可以直接使用。下边是官方给的一个案例,可以参考一下

	import React from "react";
	import {
	 BrowserRouter as Router,
	 Switch,
	 Route,
	 Link,
	 useRouteMatch
	} from "react-router-dom";
	
	// This example show how you could create a custom
	// <Link> that renders something special when the URL
	// is the same as the one the <Link> points to.
	
	export default function CustomLinkExample() {
	 return (
	   <Router>
	     <div>
	       <OldSchoolMenuLink
	         activeOnlyWhenExact={true}
	         to="/"
	         label="Home"
	       />
	       <OldSchoolMenuLink to="/about" label="About" />
	
	       <hr />
	
	       <Switch>
	         <Route exact path="/">
	           <Home />
	         </Route>
	         <Route path="/about">
	           <About />
	         </Route>
	       </Switch>
	     </div>
	   </Router>
	 );
	}