<BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。
import { BrowserRouter } from 'react-router-dom';
<BrowserRouter
basename={string}
forceRefresh={bool}
getUserConfirmation={func}
keyLength={number}
>
<App />
</BrowserRouter>
- basename--所有位置的基准 URL。如果你的应用程序部署在服务器的子目录，则需要将其设置为子目录。basename 的正确格式是前面有一个前导斜杠，但不能有尾部斜杠。
- forceRefresh--如果为 true ，在导航的过程中整个页面将会刷新。一般情况下，只有在不支持 HTML5 history API 的浏览器中使用此功能。
- getUserConfirmation--用于确认导航的函数，默认使用 window.confirm。例如，当从
/a导航至/b时，会使用默认的confirm函数弹出一个提示，用户点击确定后才进行导航，否则不做任何处理。译注：需要配合<Prompt>一起使用。 - keyLength--location.key 的长度，默认为 6。
<HashRouter> 使用 URL 的 hash 部分（即 window.location.hash）来保持 UI 和 URL 的同步。
import { HashRouter } from 'react-router-dom';
<HashRouter>
<App />
</HashRouter>
1）. basename--所有位置的基准 URL。basename 的正确格式是前面有一个前导斜杠，但不能有尾部斜杠。
<HashRouter basename="/calendar">
<Link to="/today" />
</HashRouter>
上例中的 <Link> 最终将被呈现为：
<a href="#/calendar/today" />
2）. getUserConfirmation: func--用于确认导航的函数，默认使用 [window.confirm]
3）. hashType: string
window.location.hash 使用的 hash 类型，有如下几种：
slash - 后面跟一个斜杠，例如 #/ 和 #/sunshine/lollipops--默认
noslash - 后面没有斜杠，例如 # 和 #sunshine/lollipops
hashbang - Google 风格的 [ajax crawlable]，例如 #!/ 和 #!/sunshine/lollipops
注意
该技术仅用于支持旧式（低版本）浏览器，因此对于一些新式浏览器，我们鼓励你使用 <BrowserHistory> 代替
<Route></Route>
在其 path 属性与某个 [location]匹配时呈现一些 UI。
<Router></Router>
所有 Router 组件的通用低阶接口。通常情况下，应用程序只会使用其中一个高阶 Router。使用低阶 <Router> 的最常见用例是同步一个自定义历史记录与一个状态管理库，比如 Redux 或 Mobx。请注意，将 React Router 和状态管理库一起使用并不是必需的，它仅用于深度集成。
有一个属性是history，表示网页历史记录。
<Link to = '' component=''></Link>
为你的应用提供声明式的、可访问的导航链接。
to--字符串形式链接地址，通过 pathname、search 和 hash 属性创建。
或对象形式链接地址，pathneme、search、hash和state
replace--true点击链接时替换，false时添加
innerRef--函数。允许访问组件的底层引用。
<NavLink to='' component='' exact className="active"></NavLink>
会在与当前 URL 匹配时为其呈现元素添加样式属性。如className="active"
exact--如果为 true，则只有在位置完全匹配时才应用激活类/样式。
<Redirect to='路径' from='重定向的路径名' exact strict />
使用 <Redirect> 会导航到一个新的位置。新的位置将覆盖历史堆栈中的当前条目
注意：
<Redirect>只能在<switch></switch>标签内使用
以上“根据匹配参数进行重定向”的示例存在bug，没有效果。to 中的 :id 并不会继承 from 中的 :id 匹配的值，而是直接作为字符串显示到浏览器地址栏
<Switch></Switch>
用于渲染与路径匹配的第一个子 <Route> 或 <Redirect>。
<Switch> 只会渲染一个路由。相反，仅仅定义一系列 <Route> 时，每一个与路径匹配的 <Route> 都将包含在渲染范围内。
用于匹配子元素而不是当前历史位置（通常是当前的浏览器 URL）的 [location]对象。
所有 <Switch> 的子元素都应该是 <Route> 或 <Redirect>。只有第一个匹配当前路径的子元素将被呈现。
<Route> 组件使用 path 属性进行匹配，而 <Redirect> 组件使用它们的 from 属性进行匹配。没有 path 属性的 <Route> 或者没有 from 属性的 <Redirect> 将始终与当前路径匹配。
当在 <Switch> 中包含 <Redirect> 时，你可以使用任何 <Route> 拥有的路径匹配属性：path、exact 和 strict。from 只是 path 的别名。
如果给 <Switch> 提供一个 location 属性，它将覆盖匹配的子元素上的 location 属性。
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
<Redirect from="/accounts" to="/users" />
<Route component={NoMatch} />
</Switch>
history
history 指的是 [history] 包，它是 React Router 的两个主要依赖之一（除了 React 本身），并且提供了几种不同的实现方式，用于在各种环境中管理 JavaScript 中的会话历史。
history 对象通常具有以下属性和方法：
-
length- number 历史堆栈中的条目数 -
action- string 当前的导航操作（push、replace或pop） -
location- object 当前访问的位置信息，可能具有以下属性：-
pathname- string URL 路径 -
search- string URL 中的查询字符串 -
hash- string URL 中的 hash 片段 -
state- object 存储至location中的额外状态数据，仅在browser history和memory history中有效。
-
-
push(path, [state])- function 将一个新条目推入到历史堆栈中 -
replace(path, [state])- function 替换历史堆栈中的当前条目 -
go(n)- function 将历史堆栈中的指针移动 n 个条目 -
goBack()- function 返回到上一个页面，相当于 go(-1) -
goForward()- function 进入到下一个页面，相当于 go(1) -
block(prompt)- function 阻止导航（请参阅 history 文档）
注意：history 对象是可变的。因此建议从 <Route> 渲染组件时接收的属性中直接访问 location，而不是通过 history.location 进行访问。这样可以保证 React 在生命周期中的钩子函数正常执行。
location
location 代表应用程序的位置。如当前的位置，将要去的位置，或是之前所在的位置。它看起来像这样：
{
key: 'ac3df4', // 使用 hash history 时，没有这个属性
pathname: '/somewhere'
search: '?some=search-string',
hash: '#howdy',
state: {
[userDefined]: true
}
}
Router 将在以下几个地方为您提供一个 location 对象：
在 Route component 中，以 this.props.location 方式获取
在 Route render 中，以 ({ location }) => () 方式获取
在 Route children 中，以 ({ location }) => () 方式获取
在 withRouter 中，以 this.props.location 方式获取
location 对象永远不会发生改变，因此可以在生命周期钩子函数中使用 location 对象来查看当前访问地址是否发生改变。这种技巧在获取远程数据以及使用动画时非常有用。
最终，location 将传递给以下组件：
match
一个 match 对象包含有关 <Route path> 如何匹配 URL 的信息。它具有以下属性：
params - object 根据 path 中指定的动态片段，从 URL 中解析出的键值对
isExact - boolean 如果整个 URL 匹配（不包含尾随字符），则为 true
path - string 用于匹配的路径模式。可用于构建嵌套的 <Route>
url - string URL 的匹配部分。可用于构建嵌套的 <Link>
您可以在以下几个地方访问 match 对象：
在 Route component 中，以 this.props.match 方式获取
在 Route render 中，以 ({ match }) => () 方式获取
在 Route children 中，以 ({ match }) => () 方式获取
在 withRouter 中，以 this.props.match 方式获取
matchPath 的返回值
如果 <Route> 没有定义 path，并因此始终匹配，则会得到最接近的父匹配。withRouter 也是一样。
image.png
使用Route 会自动在props方法中添加许多东西，以便调用，没有使用Route的使用 withRouter（组件名）之后，就能调用没有添加的东西
react loadable
安装：
引入：
import Loadable from 'react-loadable';
import Loading from './Loading';
image.png
使用：分片打包，按需加载
优点：
基于import()的自动代码拆分
避免组件加载闪烁
预加载
说了这么多，是时候上项目了：
利用路由实现跳转页面及页面中的元素跳转页面
- 新建一个react项目
- 安装配件
cnpm i react-router-dom react-loadable -S -
项目目录：
image.png
(1)/src/app.css
(2)/src/index.js
(3)/src/App.js
(4)/src/routes
(5)/src/component/BackButton/index.js
(6)/src/compoment/index.js
(7)/src/pages/Home/index.js
(8)/src/pages/Mall/index.js
(9)/src/pages/About/index.js
(10)/src/pages/Detail/index.js
(11)/src/pages/index.js
网友评论