react-浅析react-router4

2024年4月4日 203次阅读 来源: Graycrr

在react-router4中，除了在路由文件中还可以在页面中写路由组件

dva初始化项目中router.js文件的内容如下

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

页面中的路由：

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';

class Products extends React.Component {
  render() {
     return （
        <div>
           <Switch>
              <Route path="/" component={IndexPage} />
           </Switch>
        </div>
     ）
  }
}

一、引用react-router-dom

react-router-dom是用于DOM绑定的 React Router, 比react-router多出了<Link><BrowserRouter>这样的DOM类组件

import { Router, Route, Switch, Redirect } from 'react-router-dom';

二、组件-<Router>

// 用于导航的历史对象
<Router history={history}></Router>

// 一个使用了 HTML5 history API 的高阶路由组件，保证你的 UI 界面和 URL 保持同步
<BrowserRouter
    basename="/minooo" // 添加一个基准URL
    forceRefresh={false} // 当浏览器不支持 HTML5 的 history API 时强制刷新页面
    getUserConfirmation={getConfirmation()} // 导航到此页面前执行的函数
    keyLength={12} // 设置它里面路由的 location.key 的长度。默认是6
></BrowserRouter>

<HashRouter></HashRouter>
// Hash history 不支持 location.key 和 location.state。
// 另外由于该技术只是用来支持旧版浏览器，因此更推荐大家使用 BrowserRouter

三、组件-<Switch>

如果你访问 /about，那么组件 About User Nomatch 都将被渲染出来，因为他们对应的路由与访问的地址 /about 匹配

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

<Switch>只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

四、组件-<Route>

<Route
 path="/" // url路径
 exact  // bool 严格匹配 ’/link’与’/’是不匹配的，但是在false的情况下它们是匹配的
 component={IndexPage} // 渲染的组件
/>

<Route
 path="/" // url路径
 exact  // bool 严格匹配 ’/link’与’/’是不匹配的，但是在false的情况下它们是匹配的
 render={() => <div>Home</div>} // 内联渲染
/>

五、组件-<Redirect>

// 通过from匹配路由重定向
<Switch>
  <Redirect from='/users/:id' to='/users/profile/:id'/>
  <Route path='/users/profile/:id' component={Profile}/>
</Switch>

// 通过render重定向
<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

六、组件-<Link>

// to为string
<Link to='/courses?sort=name'/>

// to为obj
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

// replace
<Link to="/courses" replace />
// replace(bool)：为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址；
// 为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false；

七、组件-<NavLink>

<NavLink to="/about" exact>About</NavLink>

<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>

<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>

八、对象-history

history 对象通常具有以下属性和方法：

  • length: number 浏览历史堆栈中的条目数
  • action: string 路由跳转到当前页面执行的动作，分为 PUSH, REPLACE, POP

  • location: object 当前访问地址信息组成的对象，具有如下属性：

     pathname: string URL路径
 search: string URL中的查询字符串
 hash: string URL的 hash 片段
 state: string 例如执行 push(path, state) 操作时，location 的 state
        将被提供到堆栈信息里，state 只有在 browser 和 memory history 有效。
  • push(path, [state]) 在历史堆栈信息里加入一个新条目。
  • replace(path, [state]) 在历史堆栈信息里替换掉当前的条目
  • go(n) 将 history 堆栈中的指针向前移动 n。
  • goBack() 等同于 go(-1)
  • goForward 等同于 go(1)
  • block(prompt) 阻止跳转

九、对象-location

location 是指你当前的位置，将要去的位置，或是之前所在的位置

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

在以下情境中可以获取 location 对象

  • 在 Route component 中，以 this.props.location 获取
  • 在 Route render 中，以 ({location}) => () 方式获取
  • 在 Route children 中，以 ({location}) => () 方式获取
  • 在 withRouter 中，以 this.props.location 的方式获取

可以在不同情境中使用 location：

<Link to={location} />
<NaviveLink to={location} />
<Redirect to={location />
history.push(location)
history.replace(location)

十、对象-match

const Topics = ({ match }) => (
  <div>
    <Link to={`${match.url}/rendering`}>Rendering with React</Link>
    <Route path={`${match.url}/:topicId`} component={Topic} />
  </div>
);

match 对象包含了 <Route path> 如何与 URL 匹配的信息，具有以下属性：

  • params: object 路径参数，通过解析 URL 中的动态部分获得键值对
  • isExact: bool 为 true 时，整个 URL 都需要匹配
  • path: string 用来匹配的路径模式，用于创建嵌套的 <Route>
  • url: string URL 匹配的部分，用于嵌套的 <Link>

在以下情境中可以获取 match 对象

  • 在 Route component 中，以 this.props.match获取
  • 在 Route render 中，以 ({match}) => () 方式获取
  • 在 Route children 中，以 ({match}) => () 方式获取uter 中，以 this.props.match的方式获取matchPath 的返回值

当一个 Route 没有 path 时，它会匹配一切路径。

具体实例可参考

https://reacttraining.com/rea…

    原文作者：Graycrr
    原文地址: https://segmentfault.com/a/1190000016610898
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞