React-router5.x使用总结

小晓峰 發表於 2020-3-7 17:55:00

在 React router 中通常使用的组件有三种：
<ul>
<li>路由组件（作为根组件）: BrowserRouter（history模式）和 HashRouter（hash模式）</li>
<li>路径匹配组件: Route 和 Switch</li>
<li>导航组件: Link 和 NavLink</li>
</ul>
关于路由组件，如果我们的应用有服务器响应web的请求，建议使用<BrowserRouter>组件; 如果使用静态文件服务器，建议使用<HashRouter>组件。
<h3>1、安装：</h3>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="27">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;cnpm i react-router react-router-dom -S&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">cnpm i react-router react-router-dom -S</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<h3>2、使用：</h3>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="26">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;import React, { Component } from 'react'\nimport { BrowserRouter, Route, Link } from 'react-router-dom'\nimport ThisCollapse from '@/components/ThisCollapse'\nimport ThisProgress from '@/components/ThisProgress'\nimport ThisTable from '@/components/ThisTable'\n\nexport default class App extends Component {\n render() {\n return (\n &lt;BrowserRouter&gt;\n &lt;div&gt;\n &lt;Route path=\&quot;/\&quot; exactcomponent={ThisTable}&gt;&lt;/Route&gt;\n &lt;Route path=\&quot;/a\&quot; exactcomponent={ThisCollapse} &gt;&lt;/Route&gt;\n &lt;Route path=\&quot;/b\&quot; exactcomponent={ThisProgress} &gt;&lt;/Route&gt;\n &lt;/div&gt;\n &lt;/BrowserRouter&gt;\n )\n }\n}\n&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">import React, { Component } from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import ThisCollapse from '@/components/ThisCollapse'
import ThisProgress from '@/components/ThisProgress'
import ThisTable from '@/components/ThisTable'

export default class App extends Component {
render() {
 return (
 <BrowserRouter>
 <div>
 <Route path="/" exactcomponent={ThisTable}></Route>
 <Route path="/a" exactcomponent={ThisCollapse} ></Route>
 <Route path="/b" exactcomponent={ThisProgress} ></Route>
 </div>
 </BrowserRouter>
 )
}
}
</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<h3>3、路由组件 BrowserRouter 和 HashRouter：</h3>
BrowserRouter（history模式）和 HashRouter（hash模式）作为路由配置的最外层容器，是两种不同的模式，可根据需要选择。
hash 模式：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="25">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;import React, { Component } from 'react'\nimport { HashRouter, Route, Link } from 'react-router-dom'\nimport ThisCollapse from '@/components/ThisCollapse'\nimport ThisProgress from '@/components/ThisProgress'\nimport ThisTable from '@/components/ThisTable'\n\nexport default class App extends Component {\n render() {\n return (\n &lt;HashRouter&gt;\n &lt;div&gt;\n &lt;Route path=\&quot;/\&quot; exactcomponent={ThisTable}&gt;&lt;/Route&gt;\n &lt;Route path=\&quot;/a\&quot; exactcomponent={ThisCollapse} &gt;&lt;/Route&gt;\n &lt;Route path=\&quot;/b\&quot; exactcomponent={ThisProgress} &gt;&lt;/Route&gt;\n &lt;/div&gt;\n &lt;/HashRouter&gt;\n )\n }\n}\n&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">import React, { Component } from 'react'
import { HashRouter, Route, Link } from 'react-router-dom'
import ThisCollapse from '@/components/ThisCollapse'
import ThisProgress from '@/components/ThisProgress'
import ThisTable from '@/components/ThisTable'

export default class App extends Component {
render() {
 return (
 <HashRouter>
 <div>
 <Route path="/" exactcomponent={ThisTable}></Route>
 <Route path="/a" exactcomponent={ThisCollapse} ></Route>
 <Route path="/b" exactcomponent={ThisProgress} ></Route>
 </div>
 </HashRouter>
 )
}
}
</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
通过“http://localhost:8080/#/a” 即可直接访问组件ThisCollapse。
history 模式：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="24">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;import React, { Component } from 'react'\nimport { BrowserRouter, Route, Link } from 'react-router-dom'\nimport ThisCollapse from '@/components/ThisCollapse'\nimport ThisProgress from '@/components/ThisProgress'\nimport ThisTable from '@/components/ThisTable'\n\nexport default class App extends Component {\n render() {\n return (\n &lt;BrowserRouter&gt;\n &lt;div&gt;\n &lt;Route path=\&quot;/\&quot; exactcomponent={ThisTable}&gt;&lt;/Route&gt;\n &lt;Route path=\&quot;/a\&quot; exactcomponent={ThisCollapse} &gt;&lt;/Route&gt;\n &lt;Route path=\&quot;/b\&quot; exactcomponent={ThisProgress} &gt;&lt;/Route&gt;\n &lt;/div&gt;\n &lt;/BrowserRouter&gt;\n )\n }\n}\n&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">import React, { Component } from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import ThisCollapse from '@/components/ThisCollapse'
import ThisProgress from '@/components/ThisProgress'
import ThisTable from '@/components/ThisTable'

export default class App extends Component {
render() {
 return (
 <BrowserRouter>
 <div>
 <Route path="/" exactcomponent={ThisTable}></Route>
 <Route path="/a" exactcomponent={ThisCollapse} ></Route>
 <Route path="/b" exactcomponent={ThisProgress} ></Route>
 </div>
 </BrowserRouter>
 )
}
}
</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
注意：当我们去访问localhost:8081/a这个地址的时候，webpack-dev-server会默认为你要访问服务器上的一个a页面。但我们的项目中只有一个index.html页面，并不存在list页面。所以它会提示你：Cannot GET /a（页面不存在）
在package.json中，我们可以使用webpack-dev-server中的 historyApiFallback 配置来解决此问题：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="23">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot; devServer: {\n historyApiFallback: true\n }&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"> devServer: {
 historyApiFallback: true
}</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
这样通过：“http://localhost:8080/a”可以直接访问组件ThisCollapse。
<h3>4、路径匹配组件: Route 和 Switch：</h3>
Route: 用来控制路径对应显示的组件
有以下几个参数：
4.1 path：指定路由跳转路径
4.2 exact: 精确匹配路由
4.3 component：路由对应的组件
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="22">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;import ThisCollapse from '@/components/ThisCollapse'\n\n...\n\n&lt;Route path=\&quot;/\&quot; exact component={ThisTable}&gt;&lt;/Route&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">import ThisCollapse from '@/components/ThisCollapse'

...

<Route path="/" exact component={ThisTable}></Route></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
4.4 render：通过写render函数返回具体的dom：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="21">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;&lt;Route path='/about' exact render={() =&gt; (&lt;div&gt;about&lt;/div&gt;)}&gt;&lt;/Route&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"><Route path='/about' exact render={() => (<div>about</div>)}></Route></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
render 也可以直接返回 About 组件，像下面：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="20">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;&lt;Route path='/about' exact render={() =&gt; &lt;About /&gt; }&gt;&lt;/Route&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"><Route path='/about' exact render={() => <About /> }></Route></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
但是，这样写的好处是，不仅可以通过 render 方法传递 props 属性，并且可以传递自定义属性：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="19">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;&lt;Route path='/about' exact render={(props) =&gt; {\n return &lt;About {...props} name={'cedric'} /&gt;\n}}&gt;&lt;/Route&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"><Route path='/about' exact render={(props) => {
return <About {...props} name={'cedric'} />
}}></Route></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
然后，就可在 About 组件中获取 props 和 name 属性：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="18">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;componentDidMount() {\n console.log(this.props) \n}\n\n\n// this.props：\n// history: {length: 9, action: \&quot;POP\&quot;, location: {…}, createHref: ƒ, push: ƒ, …}\n// location: {pathname: \&quot;/home\&quot;, search: \&quot;\&quot;, hash: \&quot;\&quot;, state: undefined, key: \&quot;ad7bco\&quot;}\n// match: {path: \&quot;/home\&quot;, url: \&quot;/home\&quot;, isExact: true, params: {…}}\n// name: \&quot;cedric\&quot;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">componentDidMount() {
console.log(this.props)
}

// this.props：
// history: {length: 9, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …}
// location: {pathname: "/home", search: "", hash: "", state: undefined, key: "ad7bco"}
// match: {path: "/home", url: "/home", isExact: true, params: {…}}
// name: "cedric"</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
render 方法也可用来进行权限认证：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="17">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;&lt;Route path='/user' exact render={(props) =&gt; {\n // isLogin 从 redux 中拿到, 判断用户是否登录\n return isLogin ? &lt;User {...props} name={'cedric'} /&gt; : &lt;div&gt;请先登录&lt;/div&gt;\n}}&gt;&lt;/Route&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"><Route path='/user' exact render={(props) => {
// isLogin 从 redux 中拿到, 判断用户是否登录
return isLogin ? <User {...props} name={'cedric'} /> : <div>请先登录</div>
}}></Route></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
4.5 location: 将与当前历史记录位置以外的位置相匹配，则此功能在路由过渡动效中非常有用
4.6 sensitive：是否区分路由大小写
4.7 strict: 是否配置路由后面的 '/'
Switch
渲染与该地址匹配的第一个子节点 <Route> 或者 <Redirect>。
类似于选项卡，只是匹配到第一个路由后，就不再继续匹配：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="16">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot; &lt;BrowserRouter&gt;\n &lt;Switch&gt;\n &lt;Route path=\&quot;/\&quot; exact component={ThisTable}&gt;&lt;/Route&gt;\n &lt;Route path=\&quot;/a\&quot; exact component={ThisCollapse} &gt;&lt;/Route&gt;\n &lt;Route path=\&quot;/a\&quot; exact component={ThisProgress} &gt;&lt;/Route&gt;\n &lt;/Switch&gt;\n &lt;/BrowserRouter&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"> <BrowserRouter>
 <Switch>
 <Route path="/" exact component={ThisTable}></Route>
 <Route path="/a" exact component={ThisCollapse} ></Route>
 <Route path="/a" exact component={ThisProgress} ></Route>
 </Switch>
 </BrowserRouter></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
此时，“http://localhost:8082/a”只能匹配到组件ThisCollapse。
所以，如果像下面这样:
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="15">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;&lt;Switch&gt; \n &lt;Route path='/home'component={Home}&gt;&lt;/Route&gt;\n &lt;Route path='/login'component={Login}&gt;&lt;/Route&gt; \n &lt;Route path='/detail'component={detail}&gt;&lt;/Route&gt; \n &lt;Route path='/detail/:id'component={detailId}&gt;&lt;/Route&gt; \n &lt;Redirect to=\&quot;/home\&quot; from='/' /&gt; \n&lt;/Switch&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"><Switch>
<Route path='/home'component={Home}></Route>
<Route path='/login'component={Login}></Route>
<Route path='/detail'component={detail}></Route>
<Route path='/detail/:id'component={detailId}></Route>
<Redirect to="/home" from='/' />
</Switch></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
当路由为/detail/1时，只会访问匹配组件detail, 所以需要在detail路由上加上exact:
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="14">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;&lt;Switch&gt; \n &lt;Route path='/home'component={Home}&gt;&lt;/Route&gt;\n &lt;Route path='/login'component={Login}&gt;&lt;/Route&gt; \n &lt;Route path='/detail' exactcomponent={detail}&gt;&lt;/Route&gt; \n &lt;Route path='/detail/:id'component={detailId}&gt;&lt;/Route&gt; \n &lt;Redirect to=\&quot;/home\&quot; from='/' /&gt; \n&lt;/Switch&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"><Switch>
<Route path='/home'component={Home}></Route>
<Route path='/login'component={Login}></Route>
<Route path='/detail' exactcomponent={detail}></Route>
<Route path='/detail/:id'component={detailId}></Route>
<Redirect to="/home" from='/' />
</Switch></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
 注意：如果路由 Route 外部包裹 Switch 时，路由匹配到对应的组件后，就不会继续渲染其他组件了。但是如果外部不包裹 Switch 时，所有路由组件会先渲染一遍，然后选择到匹配的路由进行显示。
<h3>5. 导航组件: Link 和 NavLink</h3>
Link 和 NavLink 都可以用来指定路由跳转，NavLink 的可选参数更多。
Link
两种配置方式：
通过字符串执行跳转路由
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="13">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;&lt;Link to='/login'&gt;\n &lt;span&gt;登录&lt;/span&gt;\n&lt;/Link&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"><Link to='/login'>
<span>登录</span>
</Link></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
通过对象指定跳转路由
<ul>
<li>pathname: 表示要链接到的路径的字符串。</li>
<li>search: 表示查询参数的字符串形式。</li>
<li>hash: 放入网址的 hash，例如 #a-hash。</li>
<li>state: 状态持续到 location。通常用于隐式传参（埋点），可以用来统计页面来源</li>
</ul>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="12">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;&lt;Link to={{\n pathname: '/login',\n search: '?name=cedric',\n hash: '#someHash',\n state: { fromWechat: true }\n }}&gt;\n &lt;span&gt;登录&lt;/span&gt;\n&lt;/Link&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"><Link to={{
 pathname: '/login',
 search: '?name=cedric',
 hash: '#someHash',
 state: { fromWechat: true }
}}>
<span>登录</span>
</Link></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
点击链接进入 Login 页面后，就可以在this.props.location.state中看到 fromWechat: true:
NavLink
可以看做一个特殊版本的 Link，当它与当前 URL 匹配时，为其渲染元素添加样式属性。
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="11">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;&lt;Link to='/login' activeClassName=\&quot;selected\&quot;&gt;\n &lt;span&gt;登录&lt;/span&gt;\n&lt;/Link&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"><Link to='/login' activeClassName="selected">
<span>登录</span>
</Link></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="10">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;&lt;NavLink\nto=\&quot;/login\&quot;\nactiveStyle={{\n fontWeight: 'bold',\n color: 'red'\n }}\n&gt;\n &lt;span&gt;登录&lt;/span&gt;\n&lt;/NavLink&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"><NavLink
to="/login"
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
>
<span>登录</span>
</NavLink></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<ul>
<li>exact: 如果为 true，则仅在位置完全匹配时才应用 active 的类/样式。</li>
<li>strict: 当为 true，要考虑位置是否匹配当前的URL时，pathname 尾部的斜线要考虑在内。</li>
<li>location 接收一个location对象，当url满足这个对象的条件才会跳转</li>
<li>isActive: 接收一个回调函数，只有当 active 状态变化时才能触发，如果返回false则跳转失败</li>
</ul>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="9">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;const oddEvent = (match, location) =&gt; {\nif (!match) {\n return false\n}\nconst eventID = parseInt(match.params.eventID)\nreturn !isNaN(eventID) &amp;&amp; eventID % 2 === 1\n}\n\n&lt;NavLink\nto=\&quot;/login\&quot;\nisActive={oddEvent}\n&gt;login&lt;/NavLink&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
to="/login"
isActive={oddEvent}
>login</NavLink></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<h3>6. Redirect</h3>
<Redirect> 将导航到一个新的地址。即重定向。
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="8">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;&lt;Switch&gt; \n &lt;Route path='/home' exact component={Home}&gt;&lt;/Route&gt;\n &lt;Route path='/login' exact component={Login}&gt;&lt;/Route&gt; \n &lt;Redirect to=\&quot;/home\&quot; from='/' exact /&gt; \n&lt;/Switch&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"><Switch>
<Route path='/home' exact component={Home}></Route>
<Route path='/login' exact component={Login}></Route>
<Redirect to="/home" from='/' exact />
</Switch></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
上面，当访问路由‘/’时，会直接重定向到‘/home’。
<Redirect> 常在用户是否登录：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="7">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;class Center extends PureComponent {\n render() {\n const { loginStatus } = this.props;\n if (loginStatus) {\n return (\n &lt;div&gt;个人中心&lt;/div&gt;\n )\n } else {\n return &lt;Redirect to='/login' /&gt;\n }\n }\n}&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">class Center extends PureComponent {
render() {
 const { loginStatus } = this.props;
 if (loginStatus) {
 return (
 <div>个人中心</div>
 )
 } else {
 return <Redirect to='/login' />
 }
}
}</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
也可使用对象形式：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="6">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;&lt;Redirect\nto={{\n pathname: \&quot;/login\&quot;,\n search: \&quot;?utm=your+face\&quot;,\n state: { referrer: currentLocation }\n}}\n/&gt;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"><Redirect
to={{
pathname: "/login",
search: "?utm=your+face",
state: { referrer: currentLocation }
}}
/></code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<h3> 7. withRouter</h3>
withRouter 可以将一个非路由组件包裹为路由组件，使这个非路由组件也能访问到当前路由的match, location, history对象。
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="5">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;import { withRouter } from 'react-router-dom';\n\nclass Detail extends Component {\n render() {\n ··· ···\n } \n}\n \nconst mapStateToProps = (state) =&gt; {\n return {\n ··· ···\n }\n}\n\nconst mapDispatchToProps = (dispatch) =&gt; {\n return {\n ··· ···\n }\n}\n \nexport default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail));&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">import { withRouter } from 'react-router-dom';

class Detail extends Component {
render() {
 ··· ···
}
}

const mapStateToProps = (state) => {
return {
 ··· ···
}
}

const mapDispatchToProps = (dispatch) => {
return {
 ··· ···
}
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail));</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<h3>8. 编程式导航 - history 对象</h3>
例如，点击img进入登录页：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="4">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;class Home extends PureComponent {\n\n goHome = () =&gt; {\n console.log(this.props);\n \n this.props.history.push({\n pathname: '/login',\n state: {\n identityId: 1\n }\n })\n }\n\n render() {\n return (\n &lt;img className='banner-img' alt='' src=\&quot;img.png\&quot; onClick={this.goHome} /&gt;\n )\n } \n}&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">class Home extends PureComponent {

goHome = () => {
 console.log(this.props);

 this.props.history.push({
 pathname: '/login',
 state: {
 identityId: 1
 }
 })
}

render() {
 return (
 <img className='banner-img' alt='' src="img.png" onClick={this.goHome} />
 )
}
}</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
 history 对象通常会具有以下属性和方法：
<blockquote>
<ul>
<li>length - (number 类型) history 堆栈的条目数</li>
<li>action - (string 类型) 当前的操作(PUSH, REPLACE, POP)</li>
<li>location - (object 类型) 当前的位置。location 会具有以下属性：</li>
<li>pathname - (string 类型) URL 路径</li>
<li>search - (string 类型) URL 中的查询字符串</li>
<li>hash - (string 类型) URL 的哈希片段</li>
<li>state - (object 类型) 提供给例如使用 push(path, state) 操作将 location 放入堆栈时的特定 location 状态。只在浏览器和内存历史中可用。</li>
<li>push(path, ) - (function 类型) 在 history 堆栈添加一个新条目</li>
<li>replace(path, ) - (function 类型) 替换在 history 堆栈中的当前条目</li>
<li>go(n) - (function 类型) 将 history 堆栈中的指针调整 n</li>
<li>goBack() - (function 类型) 等同于 go(-1)</li>
<li>goForward() - (function 类型) 等同于 go(1)</li>
<li>block(prompt) - (function 类型) 阻止跳转。 </li>
</ul>
</blockquote>
注意，只有通过 Route 组件渲染的组件，才能在 this.props 上找到 history 对象
所以，如果想在路由组件的子组件中使用 history ，需要使用 withRouter 包裹:
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="3">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;import React, { PureComponent } from 'react';\nimport { withRouter } from 'react-router-dom';\n\nclass 子组件 extends PureComponent {\n\n goHome = () =&gt; {\n this.props.history.push('/home')\n }\n\n\n render() {\n console.log(this.props)\n return (\n &lt;div onClick={this.goHome}&gt;子组件&lt;/div&gt;\n )\n }\n}\n\nexport default withRouter(子组件);&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">import React, { PureComponent } from 'react';
import { withRouter } from 'react-router-dom';

class 子组件 extends PureComponent {

goHome = () => {
 this.props.history.push('/home')
}

render() {
 console.log(this.props)
 return (
 <div onClick={this.goHome}>子组件</div>
 )
}
}

export default withRouter(子组件);</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<h3>9. 路由过渡动画</h3>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="2">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;import { TransitionGroup, CSSTransition } from \&quot;react-transition-group\&quot;;\n\nclass App extends Component {\n\nrender() {\n return (\n &lt;Provider store={store}&gt;\n &lt;Fragment&gt; \n &lt;BrowserRouter&gt;\n &lt;div&gt;\n &lt;Header /&gt;\n \n {/* 最外部的&lt;Route&gt;&lt;/Route&gt;不进行任何路由匹配，仅仅是用来传递 location */}\n \n &lt;Route render={({location}) =&gt; {\n console.log(location);\n return (\n &lt;TransitionGroup&gt;\n &lt;CSSTransition\n key={location.key}\n classNames='fade'\n timeout={300}\n &gt;\n &lt;Switch&gt;\n &lt;Redirect exact from='/' to='/home' /&gt;\n &lt;Route path='/home' exact component={Home}&gt;&lt;/Route&gt;\n &lt;Route path='/login' exact component={Login}&gt;&lt;/Route&gt;\n &lt;Route path='/write' exact component={Write}&gt;&lt;/Route&gt;\n &lt;Route path='/detail/:id' exact component={Detail}&gt;&lt;/Route&gt;\n &lt;Route render={() =&gt; &lt;div&gt;Not Found&lt;/div&gt;} /&gt;\n &lt;/Switch&gt;\n &lt;/CSSTransition&gt;\n &lt;/TransitionGroup&gt;\n )\n }}&gt;\n &lt;/Route&gt;\n &lt;/div&gt;\n &lt;/BrowserRouter&gt;\n &lt;/Fragment&gt;\n &lt;/Provider&gt;\n )\n}\n}&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">import { TransitionGroup, CSSTransition } from "react-transition-group";

class App extends Component {

render() {
return (
 <Provider store={store}>
 <Fragment>
 <BrowserRouter>
 <div>
 <Header />

 {/* 最外部的<Route></Route>不进行任何路由匹配，仅仅是用来传递 location */}

 <Route render={({location}) => {
 console.log(location);
 return (
 <TransitionGroup>
 <CSSTransition
 key={location.key}
 classNames='fade'
 timeout={300}
 >
 <Switch>
 <Redirect exact from='/' to='/home' />
 <Route path='/home' exact component={Home}></Route>
 <Route path='/login' exact component={Login}></Route>
 <Route path='/write' exact component={Write}></Route>
 <Route path='/detail/:id' exact component={Detail}></Route>
 <Route render={() => <div>Not Found</div>} />
 </Switch>
 </CSSTransition>
 </TransitionGroup>
 )
 }}>
 </Route>
 </div>
 </BrowserRouter>
 </Fragment>
 </Provider>
)
}
}</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="1">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;css&quot;,&quot;code&quot;:&quot;.fade-enter {\nopacity: 0;\nz-index: 1;\n}\n\n.fade-enter.fade-enter-active {\nopacity: 1;\ntransition: opacity 300ms ease-in;\n}&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-css hljs">.fade-enter {
opacity: 0;
z-index: 1;
}

.fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 300ms ease-in;
}</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<h3>10. 打包部署的路由配置</h3>
项目执行npm run build后，将打包后的build文件当大 Nginx 配置中。
如果 react-router 路由使用了 history 模式（即<BrowserRouter>），那么在 Nginx 配置中必须加上:
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="0">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;location / {\n ··· ···\n try_files $uri /index.html;\n ··· ···\n }\n }&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">location / {
 ··· ···
 try_files $uri /index.html;
 ··· ···
 }
}</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
如果 react-router 路由使用了 hash 模式(即<HashRouter>)，那么在 Nginx 中不需要上面的配置。 
来源：https://www.cnblogs.com/samve/p/12435908.html

頁: [1]

琼殿技术论坛's Archiver

React-router5.x使用总结