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

最新推荐文章于 2024-04-21 21:26:48 发布

水痕01

最新推荐文章于 2024-04-21 21:26:48 发布

阅读量1.7k

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/kuangshp128/article/details/60745603

版权

React 专栏收录该内容

46 篇文章 5 订阅

订阅专栏

项目目录结构

项目文件结构

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>
        )
    }
}

水痕01

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于React中的路由的react-router的案例

项目目录结构 1.package.json文件内容{ "name": "react-router-demo01", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1",
复制链接

扫一扫