前段时间新换了一个电脑，这两天准备用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
