react 核心包
react-router
--------- 核心组件react-router-dom
-----应用于浏览器端的路由库(webApp)react-router-native
React Native环境下使用的包(原生 App)react-router-config
静态路由下使用的包
这些包你干什么单独下载某个即可使用,里面包=包含核心包
- 下载 react-router-dom 核心包
yarn add react-router-dom
- 引用路由(src 下 index.js 文件)
Router组件针对不同功能和平台对应用会有几种不同的子类组件实现:
<BrowserRouter>
浏览器的路由组件 ⬅⬅⬅<HashRouter>
URL格式为Hash路由组件 ⬅⬅⬅<MemoryRouter>
内存路由组件<NativeRouter>
Native的路由组件<StaticRouter>
地址不改变的静态路由组件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {HashRouter as Router} from "react-router-dom" //⬅⬅⬅⬅⬅⬅
ReactDOM.render(
<Router> //⬅⬅⬅⬅⬅⬅
<App></App>
</Router>, //⬅⬅⬅⬅⬅⬅
document.getElementById('root')
);
as
定义别名- 使用 获得的模块
Router
包裹组件 HashRouter
可以根据上面的需求自己更换
- 使用 路由 (基础)
- 根据对应的路由跳转对应的页面
import React, { Component } from 'react'
import Home from './view/Home' //引入页面
import Java from './view/Java' //引入页面
import Web from './view/Web' //引入页面
import {Route,Switch,NavLink} from "react-router-dom" //引入对应模块 ⬅⬅⬅
export default class App extends Component {
render() {
return (
<div>
<li><NavLink to="/home" activeStyle={{color:"red"}}>首页</NavLink></li>
<li><NavLink to="/Java"activeStyle={{color:"red"}}>Java</NavLink></li>
<li><NavLink to="/Web"activeStyle={{color:"red"}}>Web</NavLink></li>
跳转方式有两种 NavLink
和 Link
- Link 只能跳转,没有 class 和 style
- NavLink 可以设置 class 和 激活样式
activeStyle
------- 建议
<Switch>
<Route path='/home' component={Home}></Route>
<Route path='/Java' component={Java}></Route>
<Route path='/Web' component={Web}></Route>
</Switch>
</div>
)
}
}
Route
根据地址栏的参数进行跳转path
是对应地址component
是对应页面(组件)Switch
是当找到有一个匹配到的就不再往下匹配了
4. 使用路由 (高级)
精确匹配
,就是必须一模一样的路由参数才能跳转到对应页面 //exact
<Route path='/home' component={Home} exact></Route>
重定向
//Redirect
<Redirect to="/home" from="/" exact/> //当路由参数为 / 的时候重定向到 home 界面
- 重定向到
404
<Route path="/404" component={NotFound}/>
<Redirect to="/404"/> //如果前面的都没有匹配到,这里就会执行 重定向到 /404
// 再找到 /404路由对应页面