React-router学习笔记
简单实例
-
create-react-app name
创建React脚手架，方便简单应用。
-
设想简单页面，左侧为导航，右侧是网页的头部、内容区域、尾部。
-
src目录如下
- components // 放置组件
- css // 放置css文件
- routers // 放置router配置文件
- views // 放置页面文件
- content
- layout
- login
- App.js // 网页整体框架
- index.js
……
-
开始动手～每次敲代码的时候总觉得不知道从哪里开始，大概还是敲得不够多吧？
首先是将布局写好，通过flex布局将整体结构写好。
[外链图片转存失败(img-e46A2Li3-1562136202068)(https://s2.ax1x.com/2019/07/03/ZYDdwq.png)]
其次，在index.js中添加最外层的路由<BrowserRouter>，它的原理是使用HTML5 history API（pushState，replaceState、popState）来使你的内容随着url动态改变。
⚠️PS：
HashRouter和BrowserRouter这两个是路由的基本，必须将他们包裹在最外层，但只需要根据自己的需要选择其一就可以了。HashRouter主要是通过hash值对路由进行控制。
// index.js 主要代码
ReactDOM.render(
<BrowserRouter>
<Switch>
{
indexRouter.map((route) => {
return <Route key={ route.path } path={ route.path } exact={route.exact || false} component={route.component} />
})
}
</Switch>
{/* <App /> */}
</BrowserRouter>,
document.getElementById('root')
);
// indexRouter.js
import App from '../App'
import Login from '../views/login/Login'
import ForgetPassword from '../views/login/ForgetPassword'
export const indexRouter = [
{
path: '/forgetpassword',
exact: true,
component: ForgetPassword
},
{
path: '/login',
exact: true,
component: Login
},
{
path: '/',
exact: false,
component: App
}
]
通过简单的路由配置，现在只需要在相应的页面编写代码，既可以在浏览器的地址栏尝试路由跳转了。
⚠️PS：
在这里需要注意exact参数，它是一个boolean值，true代表需要精确匹配path和location.pathname，假如使用了true，而又出现了路由跳转了但页面没有渲染的情况，则应该检查一下path有没有写错了。
这里配置的路由既可以让页面进行重新布局，假如是在布局中对路由进行设置，页面就只会进行局部刷新了。
-
接下来我们对首页的侧边栏设置路由，让它控制右边的内容区域进行刷新。
// App.js主要代码 function App(props) { return ( <div className="app-box"> <aside className="aside-box"> <menu> <ul> { navRouter.map((route, index) => { return ( <li> <NavLink to={ route.path } key={ index } exact={ route.exact }>{ route.title }</NavLink> </li> ) }) } </ul> </menu> </aside> <div className="layout-box"> <Header /> <section> <Switch> { navRouter.map((route) => { console.log(props) return <Route path={ `${props.match.path}${route.path}` } key={ route.key } exact={ route.exact } component={ route.component } /> }) } <Redirect to='/home' /> </Switch> </section> <Footer /> </div> </div> ); }可以看到，侧边栏区域设置路由跳转、在内容区域配置了路由，这样，当点击左边侧边栏的区域时，就可以只对内容区域进行更新了。例如：我点击生活、工作等页面，内容区域就会显示对应页面的内容了。这里还用到了一个组件，主要是对url进行重新跳转，可以看到此时首页的’/‘会变更为’/home’。
-
在这个简单的例子中，我主要是用了、、、这几个简单的组件，这也是react-router中最常见的组件，通过这几者的配合使用就可以实现react简单的路由跳转了。
误解
一开始看React-router的时候一直不知道怎么使用，也分不清楚Route和Link有什么区别，而且还不知道怎么才可以重新开写布局，以为路由跳转只能进行局部页面的刷新。通过自己写一个简单的例子，其实就会对这些常用的组件有比较好的认识了，同时也知道了这些常见的组件如何使用。当然，React-router还有很多别的用法需要我再去一一探讨～
总结
React-router
它提供了router一些核心的api，包括Router、Swith、Route等，但它没有提供dom操作进行调整的api。
React-router-dom
它提供了BrowerRouter、Link、Route等api，我们可以通过DOM事件控制路由。这里需要注意，如果你使用的环境是Native环境，则需要导入React-router-native包。若是在浏览器上运行，则导入dom该包。
React-router-dom常见组件
HashRouter和BrowerRouter
Router（保持UI和URL的一致）主要分这两种：HashRouter和BrowerRouter，它们用于包裹在应用的最外层，选择其中一种就可以了，就像房子的地基一样，缺少了它们就无法进行路由操作了。
-
HashRouter
Url中会出现一个‘#’，通过Hash值进行路由控制，如果选择了这种模式，那么路由中就会默认有这个‘#’。
-
BrowerRouter
它的Url中不会存在’#’，它的原理是使用HTML5 history API（pushState，replaceState、popState）来使你的内容随着url动态改变。
Route
它是Router的子元素，用来控制Url对应显示的组件。经常用到的参数有：exact、path、component等。常配合Link使用。
-
exact
用于判断是否需要精确的匹配path和location.pathname。
-
path
决定路由调整的路径。
-
component
决定需要显示的组件。
Link和NavLink
Link
通过to属性决定跳转的路径。
NavLink
可以给当前匹配成功的Url提供一个className，常在Tab导航中使用，表示当前的链接。
Swith
它常用于包裹Route，里面不能放其它元素，用来只显示一个路由。
来源
-
一探究竟了解React-router 4简易教学
-
ReactRouter4学习笔记(二)：API