2. React-Router的基本使用

《react-router-dom源码揭秘》系列

1. Context - React跨组件访问数据的利器
3. react-router-dom源码揭秘 - BrowserRouter

今天再给你们带来一篇翻译文章。原文来自react-router-dom官网

这篇文章，是咱们react-router-dom源码揭秘系列的第二篇文章。一样是预备知识。

想看第一篇文章的客官请走这边。Context - React跨组件访问数据的利器

基本组件

React Router中有三类组件:

• router 组件（BrowserRouter，HashRouter）
• route matching 组件（Route，Switch）
• navigation 组件（Link）

使用react-router-dom以前，咱们须要在工程路径下安装这个包

npm install react-router-dom
复制代码

安装完成后，上面所列出的这些组件，咱们能够经过react-router-dom获得。

import { BrowserRouter, Route, Link } from "react-router-dom";
复制代码

Routers

基于React Router的web应用，根组件应该是一个router组件（BrowserRouter，HashRouter）。 项目中，react-router-dom提供了和两种路由。两种路由都会建立一个history对象。若是咱们的应用有服务器响应web的请求，咱们一般使用<BrowserRouter>组件; 若是使用静态文件服务器，则咱们应该使用<HashRouter>组件

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter> <App /> </BrowserRouter>,
  holder
);
复制代码

路由匹配

react-router-dom中有两个匹配路由的组件:<Route> 和 <Switch>.

import { Route, Switch } from "react-router-dom";
复制代码

路由匹配是经过将<Route>组件的path属性与当前的location的pathname进行比较来完成的。当一个<Route>匹配了，它所对应的组件内容将被渲染出来。 不匹配，则渲染null。若是一个<Route>没有path属性，他的组件对应内容将一直被渲染出来。

// 当 location = { pathname: '/about' }
<Route path='/about' component={About}/> // 路径匹配成功，渲染 <About/>组件
<Route path='/contact' component={Contact}/> // 路径不匹配，渲染 null
<Route component={Always}/> // 该组件没有path属性，其对应的<Always/>组件会一直渲染
复制代码

咱们能够在组件树的任何位置放置<Route>组件。可是更常见的状况是将几个<Route>写在一块儿。<Switch>组件能够用来将多个<Route>“包裹”在一块儿。

多个组件在一块儿使用时，并不强制要求使用<Switch>组件，可是使用<Switch>组件倒是很是便利的。<Switch>会迭代它下面的全部<Route>子组件，并只渲染第一个路径匹配的<Route>。

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  {/* 若是上面的Route的路径都没有匹配上，则 <NoMatch>被渲染，咱们能够在此组件中返回404 */}
  <Route component={NoMatch} />
</Switch>
复制代码

Route Rendering Props

<Route>匹配时所显示的组件，有三种写法：

• component
• render
• children

具体用法能够参照<Route>文档，这里咱们先简单介绍一下component和render两种方法。

component

在使用<Route>时，若是咱们想渲染的内容已经有对应的组件，则能够直接使用component的方法。例如：

<Route path="/user/:username" component={User} />;

function User({ match }) {
  return <h1>Hello {match.params.username}!</h1>;
}
复制代码

render

render方法直接使用一个内联函数来渲染内容。

// convenient inline rendering
<Route path="/home" render={() => <div>Home</div>}/>
复制代码

注意：

不要将component属性设置为一个函数，而后在其内部渲染组件。这样会致使已经存在的组件被卸载，而后重写建立一个新组件，而不是仅仅对组件进行更新。

const Home = () => <div>Home</div>;

const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* these are good */}
      <Route exact path="/" component={Home} />
      <Route
        path="/about"
        render={props => <About {...props} extra={someVariable} />}
      />
      {/* do not do this */}
      <Route
        path="/contact"
        component={props => <Contact {...props} extra={someVariable} />}
      />
    </Switch>
  );
};
复制代码

Navigation

React Router提供了一个组件用来在应用中添加link。当<Link>渲染时，一个<a>标签在html页面中被建立出来。

<Link to="/">Home</Link>
// <a href='/'>Home</a>
复制代码

<NavLink>组件是一个特殊的<Link>组件。当它的path与当前location匹配时，能够自定义其样式来表示当前页面位置。

// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
// <a href='/react' className='hurray'>React</a>
复制代码

当须要页面重定向时，咱们可使用<Redirect>组件。当一个<Redirect>组件被渲染时，页面将被渲染到<Redirect>组件的to属性指定的位置上。

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/> ) : ( <PublicHomePage/> ) )}/> 复制代码