如何使用 React Router
在这篇文章中，我将向您展示如何在您的 React 项目中包含React Router。
它使用起来很方便，而且对提升导航体验非常有帮助。👌🏽
以下是一个简单的导航栏示例（以及“关于”页面中重定向回“首页”的按钮）：
现在让我们来看看如何开始使用 React Router。
安装
- 安装react-router-dom
- 注意
create-react-app：请确保在将其添加到项目之前，您已经在使用它了。
npm install react-router-dom
包括路由器。
- 用以下方式包装你的
<App />组件<BrowserRouter /> - 将每个组件
<Route />及其路径和相应部分添加起来 - 围绕你的路由进行循环
<Switch />。Switch 会开始查找匹配的路由，而该exact属性会确保它与我们想要的完全匹配。
该<Navbar />组件将负责处理<NavLink />，更多详情请参见下文。
import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import About from './About';
import Home from './Home';
import Navbar from './Navbar';
function App() {
return (
<BrowserRouter>
<Navbar />
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/about" component={About}/>
</Switch>
</BrowserRouter>
);
}
export default App;
添加导航链接
<NavLink />将作为每个导航栏链接，使用客户端路由（单页应用程序除外）。<NavLink />该activeClassName属性允许我们为活动/非活动链接添加 CSS 样式。
import React from 'react';
import {NavLink} from 'react-router-dom'
import './App.css';
export default function Navbar() {
return (
<div>
<NavLink
activeClassName="selected"
className="not-selected"
to="/"
exact
>HOME</NavLink>
<NavLink
to="/about"
activeClassName="selected"
className="not-selected"
exact
>ABOUT
</NavLink>
</div>
)
}
钩子useHistory
- 它的作用是什么？它提供对 history 属性的访问，您可以使用该属性进行导航。
- 换句话说，它
useHistory可以用来重定向，非常方便！
import React from 'react';
import {useHistory} from 'react-router-dom';
export default function About() {
const history = useHistory()
const handleClick = () => {
history.push('/')
}
return (
<div>
<h1>ABOUT</h1>
<p>THIS IS THE ABOUT PAGE</p>
<div>
<button
onClick={handleClick}>
Back to Home
</button>
</div>
</div>
)
}
就这样！😬
文章来源：https://dev.to/deboragaleano/how-to-use-react-router-3em5