这两天参考视频教程学习了
React，加上之前也看过一些，所以有点懂了，所以试着输出一些内容，做过route的例子，巩固学校效果。
route-demo.gif
教程
创建项目
Node安装后会有一个npx命令，用这个命令可以新建React项目，具体命令如下：
npx create-react-app route-demo
至于为什么会有create-react-app命令，我也不晓得。网速比较慢，等下就好了。如果实在是很慢可以改成淘宝源：
npm config set registry https://registry.npm.taobao.org
关于路由
React的路由其实跟Python中的flask框架非常像的：
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return 'Hello World!'
@app.route('/about')
def about():
return 'About Page!'
@app.route('/article')
def article():
return 'Article Page!'
if __name__ == '__main__':
app.run()
在flask框架中，根据路由的不同，返回不同的页面（这里用字符串代替）。React的路由也是如此，只不过需要导入的库不同罢了，学习React一开始的时候，往往要学习虚拟DOM，后面才会学习如何制作多页面，使用路由。
创建项目后，修改生成的App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<div className="container">
<Link style={linkStyle} to='/'>Home</Link>|
<Link style={linkStyle} to='/article'>Article</Link>|
<Link style={linkStyle} to='/about'>About</Link>|
<Route exact path="/" render={props => (
<React.Fragment>
<h3>Home</h3>
This is Home Page.
</React.Fragment>
)} />
<Route path="/about" render={
props => (
<React.Fragment>
<h3>About</h3>
This is about page.
</React.Fragment>
)
}/>
<Route path="/article" render={
props => (
<React.Fragment>
<h3>article</h3>
This is article page.
</React.Fragment>
)
}/>
</div>
</div>
</Router>
);
}
}
const linkStyle = {
color: '#000',
textDecoration: 'none'
}
export default App;
react-router-dom
注意要先安装react-router-dom，具体命令
npm install -g react-router-dom
然后倒入要用到的模块
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
React中的路由是通过react-router-dom实现的，然后就是所有的代码都包裹在Router标签，然后单个路由包含在Route标签：
<Route exact path="/" render={props => (
<React.Fragment>
<h3>Home</h3>
This is Home Page.
</React.Fragment>
)} />
这个标签中，path属性是路由，类似于flask中装饰器的路由@app.route('/')，而render属性就相当于flask中的return或者是render_template，返回路由对应的具体内容，注意React.Fragment是用来包裹内容的一个虚拟的标签，因为不是所有的时候都需要用div来包裹标签的。
结果如下：
route-demo.gif
