©2020-2024 ioDraw All rights reserved,
Privacy Policy
在学习react-router时，应该对比着以前学习的router相关知识进行学习，比如：路由跳转，路由传参，路由重定向等，接下来会对react-router的学习进行记录，如果存在错误请谅解！
在react的项目中需要在根目录下对react-router进行下载：
npm i react-router-dom
下载后需要对Route进行引入，是个内置的组件。该组件是有两个属性一个是path，一个是component，path是组件对应的路由，component是对应的组件
import { Route } from 'react-router-dom' import Films from './views/Films'
export default class App extends Component { render() { return ( <div> <Route
path="/films" component={Films}></Route> </div> ) } }
这样Films组件所对应的路由就配置完成了，但是存在一个问题，在我们成功跳转后，刷新页面会找不到了，这时需要对HashRouter进行引入，并将路由组件包在里面就可以了
import { Route，HashRouter } from 'react-router-dom' import Films from
'./views/Films' export default class App extends Component { render() { return (
<div> <HashRouter> <Route path="/films" component={Films}></Route> </HashRouter>
</div> ) } }
在项目中不可能只要一个路由，我们通常需要配置多个，在我们配置多个路由后跳转到其他的页面后再次刷新，会跳转到路由注册的第一个组件中，为了解决这个问题引入了Switch，就相当于switch判断一样，只要有一个匹配就退出。
import { Route，HashRouter，Switch } from 'react-router-dom' import Films from
'./views/Films' export default class App extends Component { render() { return (
<div> <HashRouter> <Switch> <Route path="/films" component={Films}></Route> </
Switch> </HashRouter> </div> ) } }
但是这个匹配模式是模糊查询，如果出现路由的嵌套，会匹配第一层路由，在跳转时出现错误，这时我们需要精确匹配路由，我们需要在路由上添加一个属性exact，这时就是精确匹配。
<Route path="/films" component={Films} exact ></Route>
<>路由重定向
在项目中需要在跳转到根目录后，重定向到指定的路由上我们需要进行设置，在react
中需要通过将Redirect进行引入，在该组件上存在两个属性，一个是to，一个是from，主要是指定将哪个路由重定向到其他路由上.
import { Route，HashRouter，Switch，Redirect } from 'react-router-dom' ... <
Redirect from="/" to="/films" exact></Redirect>
上面是路由的基本使用，在我们的项目中通常是通过用户触发事件进行路由的跳转，主要有两种方式，一个是声明式导航，另一个是编程式导航
<>声明式导航
我们通常使用的是NavLink组件，但是我们在使用的时候NavLink必须包含在HashRouter组件中才可以进行使用，要不然就报错
<NavLink to="跳转的路由">文字说明</NavLink>
跳转后会在这个上添加一个active类，我们可以进行通过设置active的css进行修改选中的样式
同时，这个类名也可以进行修改，在该组件上有一个属性activeClassName，通过中属性进行修改选中的类名
这个就相当与是通过a标签进行跳转，会编译为a标签
<>编程式导航
一般我们会触发一个事件，然后进行路由跳转，比如：在用户点击一个按钮跳转到相应的页面，我们一般是将跳转函数写在事件触发的回调函数
中，这时就需要使用函数式路由
通常是使用props.history.push(‘路由’)
prop通常是接收父组件传过来的参数，由于我们在创建路由使用的是组件，所有传过来的是route的一些属性与方法
类式组件直接this.props.history.push(‘路由’)
函数式组件在函数参数中使用prop进行接收，然后直接props.history.push(‘路由’)