React-router-dom

API

<BrowserRoute>

<Router> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。

• basename: string
  • 当前位置的基准URL。如果你的页面部署在服务器的二级（子）目录，你需要将 basename 设置到此子目录。 正确的 URL 格式是前面有一个前导斜杠，但不能有尾部斜杠。

<HashRouter>

HashRouter 使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步。

<Router>

• 当存在服务区来管理动态请求时，需要使用<BrowserRouter>组件，而<HashRouter>被用于静态网站
• 所有路由器组件的通用接口，使用时<Router>标签只能包含一个子标签，一般Router放在元素标签最顶部，只需使用包括
  • <BrowserRouter>
  • <HashRouter>

<Route path='/roster'/>
// 当路径名为'/'时, path不匹配
// 当路径名为'/roster'或'/roster/2'时, path匹配
// 当你只想匹配'/roster'时，你需要使用"exact"参数
// 则路由仅匹配'/roster'而不会匹配'/roster/2'
<Route exact path='/roster'/>

<Route>

渲染

当匹配到对应的路径时，呈现相应的页面

• Route渲染页面的三种方法
  • component ：一个React组件。当带有component参数的route匹配成功后，route会返回一个新的元素，其为component参数所对应的React组件（使用React.createElement创建）

  <Route path='/page' component={Page} />
  

  • render ： 一个返回React element的函数。当匹配成功后调用该函数。该过程与传入component参数类似，并且对于行级渲染与需要向元素传入额外参数的操作会更有用。

  <Route path='/page' render={(props) => (
      <Page {...props} data={extraProps}/>
  )}/>
  

  • children ： 一个返回React element的函数。与上述两个参数不同，无论route是否匹配当前location，其都会被渲染

  <Route path='/page' children={(props) => (
      props.match
          ? <Page {...props}/>
          : <EmptyPage {...props}/>
  )}/>
  

嵌套路由

• /roster ：对应路径名仅仅是/roster时，因此需要在exact元素上添加exact参数。

• /roster/:number ： 该路由使用一个路由参数来获取/roster后的路径名。

<Switch>
      <Route exact path='/roster' component={FullRoster}/>
      <Route path='/roster/:number' component={Player}/>
</Switch>

路径参数

• 如'/roster/:number'中:number这种写法意味着/roster/后的路径名将会被获取并存在match.params.number中。例如，路径名'/roster/6'会获取到一个对象：

const Player = (props) => {

  const number = props.match.params.number;
  return (
    <div>
      <h1>参数：{number}</h1>
    </div>
)

<Link>

提供路由跳转和导航，显示在html中就是a标签

• to: string
  • 需要跳转到的路径(pathname)或地址（location）
• to: object
  • 需要跳转到的地址（location）
• replace: bool
  • 默认为false
  • 当设置为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址
  • 当设置为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。

<NavLink>

特殊版本的<Link>,当需要设置导航点击，匹配当前路由样式时，使用该组件

• activeClassName：string
  • 设置匹配当前路由时的a标签类名，默认类名是class='active'
• activeStyle: object
  • 设置匹配当前路由时的a标签样式
• exact: bool
  • 默认是false,设置为true则只有完全匹配时才能应用activeClassName和activeStyle

<Switch>

History

Location

JS控制路由跳转及传参

this.props.history.push({
            pathname: '/order-detail',//路由
            state: {
                orderNo: params //传参
            },
        });

//接受参数
let orderNo = this.props.location.state.orderNo