关于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",
"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文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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(
'/' component={App}>
{/*主页显示的*/}
'/body' component={Boys}>
'/body/:boyName' component={Boy}/>
'/girls' component={Girls}/>
,
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>
大家好，我是{this.props.params.boyName}，我爱你们~~
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 (
我的男神们：
"list-group">
- "list-group-item">"/body/宋仲基">宋仲基
- "list-group-item">"/body/吴亦凡">吴亦凡
- "list-group-item">
{this.props.children}
)
}
}9.Girls.jsx
import React, {Component} from "react";
export default class Girls extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>我是女神div>
)
}
}