第一次配置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一样。
{/* 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
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
==========阅读原文==========