React-router 4.0版本简易使用教程

前段时间新换了一个电脑，这两天准备用react写个新项目，自动拉取的 React-router 版本是4.1.1的版本；接下来用以前的写法就各种出不来，网上查了一下相关答案很少之后就想是不是版本的问题，果然新版本跟以前的用法稍微有点不一样的；

废话不说了 2.8 左右的版本是 稳定的，4.1.1是最近的新版本了；

2.8左右的版本的使用可以参照阮一峰的：
http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu
React-router的官方地址：
https://reacttraining.com/react-router/
https://reacttraining.cn/

好直接上个例子，本文用 react 官方脚手架 create-react-app
前置条件可以参照：http://blog.csdn.net/github_38095237/article/details/68491408
里边有nodejs 与 npm 的相关配置

• 打开命令提示符输入

npm install reactnpm install create-react-app -gcreate-react-app democd demonpm start //运行一下默认的是3000的地址如下图则成功

- ctrl+c 两次结束运行，进行一些小的调整

npm run eject       //将所有的配置文件和 package.json 依赖库解压到应用所在的路径方便我们进行一些小改动

运行结束后显示的目录，多了一个 config 与 scripts 文件夹；
打开scripts文件下的start.js文件

//大概在37行左右var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;//3000的位置可以修改地址例如：var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8888;npm start //此时在命令行重新启动 则地址变为http://localhost:8888

打开config 文件下的paths.js文件

//大概在68行左右module.exports = {  appBuild: resolveApp('build'),  appPublic: resolveApp('public'),  appHtml: resolveApp('public/index.html'),  appIndexJs: resolveApp('src/index.js'),  appPackageJson: resolveApp('package.json'),  appSrc: resolveApp('src'),  yarnLockFile: resolveApp('yarn.lock'),  testsSetup: resolveApp('src/setupTests.js'),  appNodeModules: resolveApp('node_modules'),  nodePaths: nodePaths,  publicUrl: getPublicUrl(resolveApp('package.json')),  servedPath: getServedPath(resolveApp('package.json'))};//其中appBuild: resolveApp('build')是打包后文件生成的文件夹可以修改成你想要的比如  appBuild: resolveApp('demo')//后边打包结束后会输出在这个文件夹下//打包之后双击打开 index.html文件是出不来的 因为路径的问题 那么就设置一下；还是这个文件大概58行function getServedPath(appPackageJson) {  var publicUrl = getPublicUrl(appPackageJson);  var servedUrl = envPublicUrl || (    publicUrl ? url.parse(publicUrl).pathname : '/'  );  return ensureSlash(servedUrl, true);}//中的publicUrl ? url.parse(publicUrl).pathname : '/' 在前边加一个.变成publicUrl ? url.parse(publicUrl).pathname : './'//好了保存一下 重新打开命令提示符npm run build   //本次打包之后的文件会放到 demo文件夹下边，双击html也可以正常显示了！！！！切记放在服务器上上线的时候如果用的BrowserRouter一定要给这个路径的.去掉 改回/ 否则会有问题。

• 接下来回到React-router
• 再次打开命令提示符输入

npm install react-routernpm install react-router-dom

//好了接下来我们直接路由//打开demo文件下的src文件夹，直接修改 App.js import React from 'react'import {BrowserRouter as Router,Route,Link} from 'react-router-dom'//导入的方式跟之前有点变化const One = () => (    <div>        <h2>首页</h2>    </div>)const Two = () => (    <div>        <h2>我是第二页</h2>    </div>)const Lists = ({ match }) => (    <div>        <h3>{match.params.ListsId}</h3>    </div>)const List = ({ match }) => (    <div>        <h2>我是一个列表</h2>        <ul>            <li>                <Link to={`${match.url}/我是第一个哈哈`}>                    列表下边的第一个                </Link>            </li>            <li>                <Link to={`${match.url}/我是第二个呵呵`}>                    列表下边的第二个                </Link>            </li>            <li>                <Link to={`${match.url}/我是第三个嘿嘿`}>                    列表下边的第三个                </Link>            </li>        </ul>        <Route path={`${match.url}/:ListsId`} component={Lists}/>        <Route exact path={match.url} render={() => (            <h3>点击上边的列表项此处显示与url地址一样的...</h3>        )}/>    </div>)const RouterList = () => (    <Router>        <div>            <Link to="/">首页</Link>            <br/>            <Link to="/two">第二页</Link>            <br/>            <Link to="/Lists">一个列表</Link>            <br/>            <Route exact path="/" component={One}/>            <Route path="/two" component={Two}/>            <Route path="/Lists" component={List}/>        </div>    </Router>)export default RouterList

大概这样可以先用啦，后边会补充一些详细的表单钩子之类的；