react路由的使用

路由的跳转

做一个简单的路由跳转

安装路由

npm i --save react-router-dom

在React router中有三种类型的组件,一是路由组件第二种是路径匹配组件第三种是导航组件。
路由组件: BrowserRouter 和 HashRouter
路径匹配的组件: Route 和 Switch
导航组件: Link

配置src下的index.js得文件:

react路由的使用_第1张图片
引入需要跳转的js

在这里插入图片描述
在引入需要的路由的组件

使用 Redirect会导航到一个新的位置。新的位置将覆盖历史堆栈中的当前条目,例如服务器端重定向
NavLink 一个特殊版本的 Link,它会在与当前 URL 匹配时为其呈现元素添加样式属性。
用于渲染与路径匹配的第一个子 

在这里插入图片描述

简单用法:
Route 可能是 React Router 中最重要的组件,它可以帮助你理解和学习如何更好的使用 React Router。它最基本的职责是在其 path 属性与某个 location 匹配时呈现一些 UI。
react路由的使用_第2张图片

你可能感兴趣的:(react,前端)