专栏名称: 前端JavaScript
分享 | 学习 | 交流 | 原创 分享是学习的开始;学习不必要从头开始,是从现在开始;交流能沟通你我,提高你的学识;期待你的加入!!! web前端技术交流,JavaScript,HTML5,CSS3……
目录
相关文章推荐
51好读  ›  专栏  ›  前端JavaScript

act闲谈——全新webpack2、react-router4架构,喜欢折腾的别错过!

前端JavaScript  · 公众号  · Javascript  · 2017-03-04 07:18

正文


第一次配置webpack2和使用react-router4,好难理解,为什么呢?因为英语不够好。


折腾了一整天,把webpack2和react-router4融入了项目中,给想尝试V2和V4的人无偿使用:https://github.com/hyy1115/react-redux-webpack2


如果你不想升级到V2和V4,也可以使用这一份稳定版:https://github.com/hyy1115/react-redux-webpack


在项目中react-router4的写法其实是这样的


import React from 'react';

import { BrowserRouter, HashRouter, Match, Router, Route, Redirect } from 'react-router';


import App from 'containers/app';

import Home from 'containers/Home/home'

import Search from 'containers/Search/search'


export default (

   

       

           

           

            {/*在这里添加你的Route*/}

       

   

);

====================================================================================


关于react-router4的新特性


API:react-router4做了较大的改变,看看提供了API就知道了。


BrowserRouter

HashRouter

MemoryRouter

ServerRouter

Match

Miss

Link

NavigationPrompt

Redirect

原则:react-router4的核心是组件。


(原文是这样的)The first principles of React Router are components, location, and Match.


Everything is a component; so, if you know React, you know React Router.

A location is data that represents where a visitor is–or wants to go–in your app. It looks just like window.location.

turns a location into UI.


翻译过来就是说:

React Router的首要原则是组件、location和Match。

所有路由都可以看成是一个组件,如果你会react,那么你就了解React Router,他们的核心是一样的,Match是一个组件,location是这个组件的一个参数,没错,这就是react组件的写法。


使用:假设现在有一个顶级容器App,用react-router的写法就是最外层用BrowserRouter来包裹,接着,你可以在里面写Link和Match这些子API,每个子路由组件还可以嵌套react组件或者路由组件,这就相当于你使用Link组件的时候可以嵌套多层DOM一样。


   

     

            {/* 3. Link to some paths with `Link` */}

           

  • Home
  •        

  • About
  •        

  • Topics
  •      

  

     


  

      {/* 4. Render some `` components.

             When the current location matches the `pattern`

             then the `component` will render.

      */}

     

     

     

  

      {/* If none of those match, then a sibling `Miss` will render. */}

     

   

 

好了,就先介绍这么多,详情可以查看 react-router4官方文档https://reacttraining.com/react-router/api

你也可以结合我在文章开头分享的github项目来学习。


提问环节:


小白:我V2、V3都还没搞懂,你分享V4有什么用?


我:前端就是这样,每天都在出新的插件,紧跟步伐,才能更好的应用于项目之中。


转自: https://segmentfault.com/a/1190000008132551

作者: hyy1115


>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


==========阅读原文==========