React-router5.x 路由的使用及配置
<p>在 React router 中通常使用的组件有三种：</p><ul>
<li>路由组件（作为根组件）: BrowserRouter（history模式） 和 HashRouter（hash模式）</li>
<li>路径匹配组件: Route 和 Switch</li>
<li>导航组件: Link 和 NavLink</li>
</ul>
<p>关于路由组件，如果我们的应用有服务器响应web的请求，建议使用<code><BrowserRouter></code>组件; 如果使用静态文件服务器，建议使用<code><HashRouter></code>组件</p>
<h2 id="1-安装">1. 安装</h2>
<pre><code>npm install react-router-dom
</code></pre>
<h2 id="2-实例">2. 实例</h2>
<pre><code>import React, { Component, Fragment } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter, Route } from 'react-router-dom';
import store from './store';
import Header from './common/header';
import Home from './pages/home';
import Detail from './pages/detail';
import Login from './pages/login';
class App extends Component {
render() {
return (
<Provider store={store}>
<Fragment>
<BrowserRouter>
<div>
<Header />
<Route path='/' exact component={Home}></Route>
<Route path='/login' exact component={Login}></Route>
<Route path='/detail/:id' exact component={Detail}></Route>
</div>
</BrowserRouter>
</Fragment>
</Provider>
)
}
}
export default App;
</code></pre>
<h2 id="3-路由组件-browserrouter-和-hashrouter">3. 路由组件 BrowserRouter 和 HashRouter</h2>
<p>BrowserRouter（history模式） 和 HashRouter（hash模式）作为路由配置的最外层容器，是两种不同的模式，可根据需要选择。</p>
<h4 id="history-模式">history 模式：</h4>
<pre><code>class App extends Component {
render() {
return (
<BrowserRouter>
<Header />
<Route path='/' exact component={Home}></Route>
<Route path='/login' exact component={Login}></Route>
<Route path='/detail/:id' exact component={Detail}></Route>
</BrowserRouter>
)
}
}
</code></pre>
<h4 id="hash-模式">hash 模式：</h4>
<pre><code>class App extends Component {
render() {
return (
<HashRouter>
<Header />
<Route path='/' exact component={Home}></Route>
<Route path='/login' exact component={Login}></Route>
<Route path='/detail/:id' exact component={Detail}></Route>
</HashRouter>
)
}
}
</code></pre>
<h2 id="4-路径匹配组件-route-和-switch">4. 路径匹配组件: Route 和 Switch</h2>
<h3 id="一route-用来控制路径对应显示的组件">一、Route: 用来控制路径对应显示的组件</h3>
<p>有以下几个参数：</p>
<h4 id="41-path指定路由跳转路径">4.1 path：指定路由跳转路径</h4>
<h4 id="42-exact-精确匹配路由">4.2 exact: 精确匹配路由</h4>
<h4 id="43-component路由对应的组件">4.3 component：路由对应的组件</h4>
<pre><code>import About from './pages/about';
··· ···
<Route path='/about' exact component={About}></Route>
</code></pre>
<h4 id="44-render-通过写render函数返回具体的dom">4.4 render： 通过写render函数返回具体的dom：</h4>
<pre><code><Route path='/about' exact render={() => (<div>about</div>)}></Route>
</code></pre>
<p>render 也可以直接返回 About 组件，像下面：</p>
<pre><code><Route path='/about' exact render={() => <About /> }></Route>
</code></pre>
<h5 id="但是这样写的好处是不仅可以通过-render-方法传递-props-属性并且可以传递自定义属性">但是，这样写的好处是，不仅可以通过 render 方法传递 props 属性，并且可以传递自定义属性：</h5>
<pre><code><Route path='/about' exact render={(props) => {
return <About {...props} name={'cedric'} />
}}></Route>
</code></pre>
<p>然后，就可在 About 组件中获取 props 和 name 属性：</p>
<pre><code>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>
<h5 id="render-方法也可用来进行权限认证">render 方法也可用来进行权限认证：</h5>
<pre><code><Route path='/user' exact render={(props) => {
// isLogin 从 redux 中拿到, 判断用户是否登录
return isLogin ? <User {...props} name={'cedric'} /> : <div>请先登录</div>
}}></Route>
</code></pre>
<h3 id="45-location-将--与当前历史记录位置以外的位置相匹配则此功能在路由过渡动效中非常有用">4.5 location: 将 <route> 与当前历史记录位置以外的位置相匹配，则此功能在路由过渡动效中非常有用</route></h3>
<h3 id="46-sensitive是否区分路由大小写">4.6 sensitive：是否区分路由大小写</h3>
<h3 id="47-strict-是否配置路由后面的-">4.7 strict: 是否配置路由后面的 '/'</h3>
<h3 id="二switch">二、Switch</h3>
<p>渲染与该地址匹配的第一个子节点 <code><Route></code> 或者 <code><Redirect></code>。</p>
<p>类似于选项卡，只是匹配到第一个路由后，就不再继续匹配：</p>
<pre><code><Switch>
<Route path='/home'component={Home}></Route>
<Route path='/login'component={Login}></Route>
<Route path='/detail'component={detail}></Route>
<Redirect to="/home" from='/' />
</Switch>
// 类似于：
// switch(Route.path) {
// case '/home':
// return Home
// case '/login':
// return Login
// ··· ···
// }
</code></pre>
<p>所以，如果像下面这样:</p>
<pre><code><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>
<p>当路由为<code>/detail/1</code>时，只会访问匹配组件<code>detail</code>, 所以需要在detail路由上加上<code>exact</code>:</p>
<pre><code><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>
<h5 id="注意如果路由-route-外部包裹-switch-时路由匹配到对应的组件后就不会继续渲染其他组件了但是如果外部不包裹-switch-时所有路由组件会先渲染一遍然后选择到匹配的路由进行显示">注意：如果路由 Route 外部包裹 Switch 时，路由匹配到对应的组件后，就不会继续渲染其他组件了。但是如果外部不包裹 Switch 时，所有路由组件会先渲染一遍，然后选择到匹配的路由进行显示。</h5>
<h2 id="5-导航组件-link-和-navlink">5. 导航组件: Link 和 NavLink</h2>
<p>Link 和 NavLink 都可以用来指定路由跳转，NavLink 的可选参数更多。</p>
<h3 id="link">Link</h3>
<p>两种配置方式：</p>
<h4 id="通过字符串执行跳转路由">通过字符串执行跳转路由</h4>
<pre><code><Link to='/login'>
<span>登录</span>
</Link>
</code></pre>
<h4 id="通过对象指定跳转路由">通过对象指定跳转路由</h4>
<ul>
<li>pathname: 表示要链接到的路径的字符串。</li>
<li>search: 表示查询参数的字符串形式。</li>
<li>hash: 放入网址的 hash，例如 #a-hash。</li>
<li>state: 状态持续到 location。通常用于隐式传参（埋点），可以用来统计页面来源</li>
</ul>
<pre><code><Link to={{
pathname: '/login',
search: '?name=cedric',
hash: '#someHash',
state: { fromWechat: true }
}}>
<span>登录</span>
</Link>
</code></pre>
<p>点击链接 进入 Login 页面后，就可以在<code>this.props.location.state</code>中看到 <code>fromWechat: true</code>:</p>
<h3 id="navlink">NavLink</h3>
<p>可以看做 一个特殊版本的 Link，当它与当前 URL 匹配时，为其渲染元素添加样式属性。</p>
<pre><code><Link to='/login' activeClassName="selected">
<span>登录</span>
</Link>
</code></pre>
<pre><code><NavLink
to="/login"
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
>
<span>登录</span>
</NavLink>
</code></pre>
<ul>
<li>exact: 如果为 true，则仅在位置完全匹配时才应用 active 的类/样式。</li>
<li>strict: 当为 true，要考虑位置是否匹配当前的URL时，pathname 尾部的斜线要考虑在内。</li>
<li>location 接收一个location对象，当url满足这个对象的条件才会跳转</li>
<li>isActive: 接收一个回调函数，只有当 active 状态变化时才能触发，如果返回false则跳转失败</li>
</ul>
<pre><code>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>
<h2 id="6-redirect">6. Redirect</h2>
<p><code><Redirect></code> 将导航到一个新的地址。即重定向。</p>
<pre><code><Switch>
<Route path='/home' exact component={Home}></Route>
<Route path='/login' exact component={Login}></Route>
<Redirect to="/home" from='/' exact />
</Switch>
</code></pre>
<p>上面，当访问路由<code>‘/’</code>时，会直接重定向到<code>‘/home’</code>。</p>
<p><code><Redirect></code> 常在用户是否登录：</p>
<pre><code>class Center extends PureComponent {
render() {
const { loginStatus } = this.props;
if (loginStatus) {
return (
<div>个人中心</div>
)
} else {
return <Redirect to='/login' />
}
}
}
</code></pre>
<p>也可使用对象形式：</p>
<pre><code><Redirect
to={{
pathname: "/login",
search: "?utm=your+face",
state: { referrer: currentLocation }
}}
/>
</code></pre>
<h2 id="7-withrouter">7. withRouter</h2>
<p>withRouter 可以将一个非路由组件包裹为路由组件，使这个非路由组件也能访问到当前路由的match, location, history对象。</p>
<pre><code>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>
<h2 id="8-编程式导航---history-对象">8. 编程式导航 - history 对象</h2>
<p>例如，点击img进入登录页：</p>
<pre><code>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>
<p>history 对象通常会具有以下属性和方法：</p>
<pre><code>length - (number 类型) history 堆栈的条目数
action - (string 类型) 当前的操作(PUSH, REPLACE, POP)
location - (object 类型) 当前的位置。location 会具有以下属性：
pathname - (string 类型) URL 路径
search - (string 类型) URL 中的查询字符串
hash - (string 类型) URL 的哈希片段
state - (object 类型) 提供给例如使用 push(path, state) 操作将 location 放入堆栈时的特定 location 状态。只在浏览器和内存历史中可用。
push(path, ) - (function 类型) 在 history 堆栈添加一个新条目
replace(path, ) - (function 类型) 替换在 history 堆栈中的当前条目
go(n) - (function 类型) 将 history 堆栈中的指针调整 n
goBack() - (function 类型) 等同于 go(-1)
goForward() - (function 类型) 等同于 go(1)
block(prompt) - (function 类型) 阻止跳转。
</code></pre>
<h4 id="注意只有通过-route-组件渲染的组件才能在-thisprops-上找到-history-对象">注意，只有通过 Route 组件渲染的组件，才能在 this.props 上找到 history 对象</h4>
<p>所以，如果想在路由组件的子组件中使用 history ，需要使用 withRouter 包裹:</p>
<pre><code>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>
<h2 id="9-路由过渡动画">9. 路由过渡动画</h2>
<pre><code>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>
<pre><code>.fade-enter {
opacity: 0;
z-index: 1;
}
.fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
</code></pre>
<h2 id="10-打包部署的路由配置">10. 打包部署的路由配置</h2>
<p>项目执行<code>npm run build</code>后，将打包后的build文件当大 Nginx 配置中。</p>
<p>如果 react-router 路由 使用了 history 模式（即<code><BrowserRouter></code>），那么在 Nginx 配置中必须加上:</p>
<pre><code>location / {
··· ···
try_files $uri /index.html;
··· ···
}
}
</code></pre>
<p>如果 react-router 路由 使用了 hash 模式(即<code><HashRouter></code>)，那么在 Nginx 中不需要上面的配置。</p><br><br>
来源：https://www.cnblogs.com/cckui/p/11490372.html
頁:
[1]