React路由示例

这两天参考视频教程学习了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 (
      
        

          

            Home|
            Article|
            About|
          
             (
              
                
Home
                This is Home Page.
              
            )} />     

             (
                
                  
About
                  This is about page.
                
              )
            }/>

             (
                
                  
article
                  This is article page.
                
              )
            }/>
            
          
        
      
    );
  }
}

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标签：

 (
              
                
Home
                This is Home Page.
              
            )} />     

这个标签中，path属性是路由，类似于flask中装饰器的路由@app.route('/')，而render属性就相当于flask中的return或者是render_template，返回路由对应的具体内容，注意React.Fragment是用来包裹内容的一个虚拟的标签，因为不是所有的时候都需要用div来包裹标签的。

结果如下：

route-demo.gif