从react-navigation转react-router

这不是一篇路由入门文章，需要熟悉react-navigation，并且对react-router有基本了解。该文章主要是做两者路由的对比，让习惯使用react-navigation的开发者更好的使用react-router。
还没了解过react-router的建议在官网：react-router里过一遍文档。

react-navigation和react-router的对比：

• 支持的平台：
  react-navigation： react-native
  react-router： react-native、reactjs
• 性质：
  react-navigation：静态路由（需要在程序一处进行完整的路由配置才能使用）
  react-router：动态路由（route在需要使用的地方配置，可以把Route当做React中的组件）
• 使用示例：
  react-navigation：

const AppNavigator = StackNavigator({
    mainTab: {
        screen: MainTabNaivigator,
        navigationOptions: ({navigation}) => ({
            header: MainTabBarHeader,
        }),
    },
    .....
    screenOne: {
        screen: ScreenOne,
        navigationOptions: ({navigation}) => ({
            header: null
        })
    },
    screenTwo: {
        screen: ScreenTwo,
        navigationOptions: ({navigation}) => ({
            title: 'test'
        })
    },
}, {
    headerMode: 'screen',
    navigationOptions: NavigationHeader,
})

react-router：

<Root>
    <Top>
        <TopRow>
            <Route
                path={`${this.props.match.path}/Login`}
                children={({match}) => (
                    <TopItem selected={match ? true : false} onClick={() => this.props.history.push(`${this.props.match.path}/Login`)}>登录</TopItem>
                )}
            />
            <TopText>|</TopText>
            <Route
                path={`${this.props.match.path}/Register`}
                children={({match}) => (
                    <TopItem selected={match ? true : false} onClick={() => this.props.history.push(`${this.props.match.path}/Register`)}>注册</TopItem>
                )}
            />
        </TopRow>
    </Top>
    <AnimatedParent>
        <Switch location={this.props.location}>
            <Route path={`${this.props.match.path}/Login`} component={Login}/>
            <Route path={`${this.props.match.path}/Register`} component={Register}/>
        </Switch>
    </AnimatedParent>
</Root>

react-router的Route相当于在StackNavigator定义的screen，可以看出Route并没有规则整齐的摆放在某一处，而是在需要使用的地方使用即可。同StackNavigator，Route必须是Router的子标签才能使用，文章后面会详细介绍。

react-navigation与react-router的原理解析：

从上部分贴出的示例代码可以看出，react-router和react-navigation的使用风格有很大的不同，其实它们的原理也不尽相同。
react-navigation原理：
通过createNavigationContainer来创建导航容器，导航容器管理着自己的state，可以通过navigation属性dispatch各种Action（例如：BACK,PUSH,RESET等），然后处理action得到新的state，从而管理着整个导航状态，再使用NavigationViews来解析state并渲染出来。
因此react-navigation提供的StackNavigator，TabbarNavigator，DrawerNavigator，它不仅管理着路由的状态树，还负责状态树按需渲染出来，提供手势及动画效果.因此它不仅依赖react，还极其依赖react-native提供的各种组件以及动画。
react-router原理：
react-router的思想是一切皆为组件，使用Route就和使用div一样的，Router管理着history，history就相当于react-navigation的state，所有的Route必须是Router的子标签，history里拥有着路由栈和当前路由位置（location）等信息，通过context，可以在Route的组件内获取到location，然后匹配location和当前Route的path，如果匹配成功就会拥有match属性，并且Route会被渲染出来，没有匹配成功则渲染null。
react-router的原理使我们使用它和使用React组件一样简单，并且它只依赖react，能在react-native中使用。

react-router实践

• 在webApp中的配置
  在最外面使用BrowserRouter，它已经封装好了history,context,subscript...

<BrowserRouter>
    <App/>
</BrowserRouter>

这与react-navigation放在外层一样：

<AppNavigator
    navigation={addNavigationHelpers({
        dispatch: this.props.dispatch,
        state: this.props.nav,
    })}
/>

• 路由嵌套
  react-router的路由嵌套就和div嵌套一样简单，取自官方的示例代码：

const App = () => (
  <BrowserRouter>
    {/* here's a div */}
    <div>
      {/* here's a Route */}
      <Route path="/tacos" component={Tacos}/>
    </div>
  </BrowserRouter>
)

// when the url matches `/tacos` this component renders
const Tacos  = ({ match }) => (
  // here's a nested div
  <div>
    {/* here's a nested Route,
        match.url helps us make a relative path */}
    <Route
      path={match.url + '/carnitas'}
      component={Carnitas}
    />
  </div>
)

在react-navigation中，navigation必须传递到子navigator中才能嵌套，所以有两种方式，第一种，直接在config的screen里写navigator：

const AppNavigator = StackNavigator({
    mainTab: {
        screen: MainTabNaivigator,
        navigationOptions: ({navigation}) => ({
            header: MainTabBarHeader,
        }),
    },
    ...
})

第二种就是主动把导航容器的navigation传入子导航完成嵌套（如果不懂可以移步我的另一篇文章：react-navigation路由篇之StackRouter）。

• 路由传参
  react-router有两种方式可以传参，一种是通过Route的path属性定义参数（path的取值规范：path-to-regexp），这种形式的参数定义和传递会在url上展示出来，例如?name=yusha&password=123，可以通过this.props.match.params获取参数：

<Route path='/Login/:name/:password' component={Login}/>
...
<Link to='/Login/yusha/123'/>
...
class Login extends React.Component {
  ...
  this.props.match.params.name
  ...
}

另外一种传参方式是通过location来传，这种参数不会在url中展示出来：

<Route path='/Login' component={Login}/>
...
<Link 
  to={
    path: '/Login'
    state: {
      name: 'yusha',
      password: '123',
    }
  }
/>
...
class Login extends React.Component {
  ...
  this.props.location.state.name
  ...
}

react-router通过location来传参就类似于react-navigation通过this.props.navigation.navigate(routename, params),然后在this.props.navigation.state.params中获取一样。

• 路由跳转
  react-router提供了多个路由跳转组件，<Link/>、<NativeLink/>、<Redirect/>，在浏览器中它们原理就是<a/>标签，因为在浏览器中history的路由栈就是使用浏览器的路由栈。当然，我们也可以使用history的一些跳转属性来跳转路由（我更喜欢这种）：

//push 、replace、goBack等
this.props.history.push('/Login', {name: 'yusha', password:'123'})

<Link>相当于push，<Redirect>相当于replace。history的路由跳转的方法是不是与react-navigation中的this.props.navigation.navigate(routename, params)很像?

• 选择路由渲染方式
  Route的渲染属性有三个，分别是component、render、children，前面贴出的所有代码中，使用的都是<Route path='routePath' component={CustomComponent}/>，这也是最易懂得，在路由匹配时渲染CustomComponent，并且传入三个属性match,location,history。
  render的使用场景路由渲染的组件需要当前域的参数，例如：

render() {
  const test = '123'
  return (
    ...
    <Route 
      path='routePath' 
      render=({match, location, history}) => <CustomComponent match location history test/>)
    />
    ...
  )
}

之前反复提及过，Route只有在匹配上path时才会渲染组件，否则渲染null，那要是我想路由没有匹配时也渲染呢？这时可以使用children：

<TopRow>
    <Route
        path={`${this.props.match.path}/Login`}
        children={({match}) => (
            <TopItem selected={match ? true : false} onClick={() => this.props.history.push(`${this.props.match.path}/Login`)}>登录</TopItem>
        )}
    />
    <TopText>|</TopText>
    <Route
        path={`${this.props.match.path}/Register`}
        children={({match}) => (
            <TopItem selected={match ? true : false} onClick={() => this.props.history.push(`${this.props.match.path}/Register`)}>注册</TopItem>
        )}
    />
</TopRow>

注意：无论是component、render、还是children，都会传入history, match, location这三个属性，componet和render在路由没有匹配上时渲染null，children在路由没有匹配上时，正常渲染，不过match为null。因此children经常用于指示器上。

• 注意点
  1、可以在任意处使用相同的路由路径
  在react-navigation中同一层级的路由名字是不能重复的，但是在react-router中相同路径的路由可以放在任意地方，用于做侧边栏（sidebars），面包屑等等。
  2、区分this.props.history.location、this.props.location
this.props.history.location和this.props.location都是当前App路由位置，但是this.props.history.location是突变的，可以理解成它全局就一个引用，使用以下代码来体会一下：

<Route path='/Login' component={Login}/>
...
class Login extends React.Component {
  componentWillReceiveProps(newProps) {
    //路由发生改变时
    console.log(this.props.location.pathname === newProps.location.pathname)  //为false
    console.log(this.props.history.location.pathname === newProps.history.location.pathname) //为true
  }
}

3、区分this.props.match.path、this.props.location.pathname
this.props.match.path代表的是当前组件路由匹配结果，match可能为空。this.props.location.pathname代表当前App路由位置。
4、区分this.props.match.path、this.porps.match.url
url是URL的匹配部分，path是Route中定义的path：

• 常用工具
  route-tester: 可以用来测试路由匹配

react-router参考文献

• react-router
• A little bit of history
  
• A Simple React Router v4 Tutorial
• 初探 React Router 4.0