关于React中的路由的react-router的案例

来源：互联网发布：采购部常用数据分析编辑：程序博客网时间：2024/06/18 16:41

项目目录结构

项目文件结构

1.package.json文件内容

{  "name": "react-router-demo01",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "webpack-dev-server --inline --host localhost --port 3000"  },  "author": "",  "license": "ISC",  "devDependencies": {    "babel-core": "^6.23.1",    "babel-loader": "^6.3.2",    "babel-preset-es2015": "^6.22.0",    "babel-preset-react": "^6.23.0",    "css-loader": "^0.26.1",    "react": "^15.4.2",    "react-dom": "^15.4.2",    "react-router": "^3.0.2",    "style-loader": "^0.13.1",    "webpack": "^2.2.1",    "webpack-dev-server": "^2.4.1"  }}

2.webpack.config.js文件的内容

'use strict';module.exports = {    entry:{        index:'./index.js',    },    output:{        path:__dirname,        filename:'[name].build.js',    },    module:{        loaders:[            {                test:/\.css$/,                loaders:['style-loader','css-loader?modules']            },            {                test:/\.(js|jsx)$/,                exclude:'/node_modules/',                loader:'babel-loader',                query:{                    presets:['es2015','react']                }            }        ]    },    resolve:{        extensions:['.js',".css",".jsx"]    }}

3.index.html文件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">    <link rel="stylesheet" href="./index.css"></head><body><div id="app" class="container"></div></body><script src="./index.build.js"></script></html>

4.index.js文件

'use strict';import React,{Component} from 'react';import ReactDom from 'react-dom';import {Router,Route,browserHistory,IndexRoute} from 'react-router';import App from './App.jsx';import Girls from './Girls.jsx';import Boys from './Boys.jsx';import Boy from './Boy.jsx';import Home from './Home.jsx';ReactDom.render(    <Router history={browserHistory}>        <Route path='/' component={App}>            {/*主页显示的*/}            <IndexRoute component={Home}/>            <Route path='/body' component={Boys}>                <Route path='/body/:boyName' component={Boy}/>            </Route>            <Route path='/girls' component={Girls}/>        </Route>    </Router>,    document.getElementById('app'))

5.App.jsx文件

import React, {Component} from "react";import { Link,IndexLink } from 'react-router';export default class App extends Component {    constructor(props) {        super(props);    }    render() {        return (            <div>                <h1 className="text-center">列表页面</h1>                <div className="row">                    <div className="col-md-3">                        <ul className="list-group">                            <li className="list-group-item"><IndexLink to="/" activeStyle={{ color: 'red' }}>返回首页</IndexLink></li>                            <li className="list-group-item"><Link to="/girls" activeStyle={{ color: 'red' }}>点击我到女神页面</Link></li>                            <li className="list-group-item"><Link to="/body" activeStyle={{ color: 'red' }}>点击我到男神页面</Link></li>                        </ul>                    </div>                    <div className="col-md-9" style={{border:'1px solid #ddd'}}>                        {this.props.children}                    </div>                </div>            </div>        )    }}

6.Home.jsx的文件

import React, {Component} from "react";export default class Home extends Component {    constructor(props) {        super(props);    }    render() {        return (            <div>~~男神女神~~</div>        )    }}

7.Boy.jsx文件

import React, {Component} from "react";export default class Boy extends Component {    constructor(props) {        super(props);    }    render() {        return (            <div>                <h2>大家好，我是{this.props.params.boyName}，我爱你们~~</h2>            </div>        )    }}

8.Bodys.jsx文件

import React, {Component} from "react";import {Link} from 'react-router';export default class Boys extends Component {    constructor(props) {        super(props);    }    handleSubmit(event) {        event.preventDefault()        const boyName = event.target.elements[0].value        const path = `/repos/${boyName}`        console.log(path)    }    render() {        return (            <div>                <h2>我的男神们：</h2>                <ul className="list-group">                    <li className="list-group-item"><Link to="/body/宋仲基">宋仲基</Link></li>                    <li className="list-group-item"><Link to="/body/吴亦凡">吴亦凡</Link></li>                    <li className="list-group-item">                        <form onSubmit={this.handleSubmit}>                            <input type="text" placeholder="boyName"/> / {' '}                            <button type="submit">Go</button>                        </form>                    </li>                </ul>                {this.props.children}            </div>        )    }}

9.Girls.jsx

import React, {Component} from "react";export default class Girls extends Component {    constructor(props) {        super(props);    }    render() {        return (            <div>我是女神</div>        )    }}

1 0