SPA：React + React-router 入门demo

最新推荐文章于 2024-05-13 15:29:18 发布

SunPrincess

最新推荐文章于 2024-05-13 15:29:18 发布

阅读量2.4k

点赞数

分类专栏： React ReactRoute JavaScript

本文链接：https://blog.csdn.net/SunPrincess/article/details/51512469

版权

JavaScript 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

React

2 篇文章 0 订阅

订阅专栏

ReactRoute

1 篇文章 0 订阅

订阅专栏

依赖Node.js、npm（或 cnpm）
0、基础代码文件结构：
这里写图片描述
1、初始化 package.json 文件： cnpm init
（设置入口文件为 index.js）
package.json （文件部分内容）:

...
"scripts": {
    "start": "webpack-dev-server --inline --content-base ."
  },
"dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "http-server": "^0.8.5",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  }
  ...

科普：dependencies 与 devDependencies区别：
dependencies：代码运行所需依赖，cnpm install packageName --save
devDependencies：代码开发所需依赖， cnpm install packageName --save-dev

2、代码
index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>

index.js :

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
//import { Router, browserHistory} from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'

render((
  <Router history={hashHistory}>
  {/*<Router history={hashHistory}> 此处若写成browserHistory，则以路径方式填写路由*/}
    <Route path="/" component={App}>
      <Route path="/repos" component={Repos}/>
      <Route path="/about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

modules/App.js :

import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><Link to="/about">About</Link></li>
          <li><Link to="/repos">Repos</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

modules/About.js :

import React from 'react'

export default React.createClass({
  render() {
    return <div>About</div>
  }
})

modules/Repos.js :

import React from 'react'

export default React.createClass({
  render() {
    return <div>Repos</div>
  }
})

webpack.config.js :

module.exports = {
  entry: './index.js',

  output: {
    filename: 'bundle.js',
    publicPath: ''
  },

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
    ]
  }
}

3、运行
cnpm install (没有下载依赖，执行此步，否则跳过)

cnpm start

浏览器打开地址： http://localhost:8080 即可看到运行结果。
webpack-server默认开启8080端口
4、运行结果截图：
首页：
这里写图片描述
子页：

参考文献

SunPrincess

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SPA：React + React-router 入门demo

依赖Node.js、npm（或 cnpm） 0、基础代码文件结构： 1、初始化 package.json 文件： cnpm init （设置入口文件为 index.js） package.json （文件部分内容）:..."scripts": { "start": "webpack-dev-server --inline --content-base ." },"depe
复制链接

扫一扫