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

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 react
npm install create-react-app -g
create-react-app demo
cd demo
npm 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-router
npm 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

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