react入门之旅5——初识路由route

SPA

全称：single page web application，单页面web应用

• 整个应用只有一个完整的页面
• 点击页面跳转不会刷新页面，只会做页面的局部更新
• 数据都是通过ajax（axios）请求获取，并在前端异步（promise）展现

PS：spa——水疗

理解路由

路由就是key-value的映射关系，key为path路径，value具体的数据或者渲染的页面，即function或者component

后端路由

工作中一般遇到的就是http请求，返回响应数据

前端路由

浏览器端路由，value是component，用于加载页面内容

Hello Route

index

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.getElementById('root')
);

app

import React, {Component} from 'react';
import {Link, Route} from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";

class App extends Component {
    render() {
        return (
            <div>
                <Link to="/home">Home</Link><br/>
                <Link to="/about">About</Link>
                <Route path="/home" component={Home}/>
                <Route path="/about" component={About}/>
            </div>
        );
    }
}

export default App;

Home

import React, {Component} from 'react';

class Home extends Component {
    render() {
        return (
            <div>
                <h3>Hello Route Home</h3>
            </div>
        );
    }
}

export default Home;

About

import React, {Component} from 'react';

class About extends Component {
    render() {
        return (
            <div>
                <h3>Hello Route About</h3>
            </div>
        );
    }
}

export default About;

一个简单的路由示例，总结一下：

• 需要使用路由，首先需要创建一个路由器，即BrowerRouter。而所有的路由关系必须是在该路由器内部完成，所以BrowerRouter直接放在index里，即最外层
• Link编写路由链接，参数to指向路由的地址
• Route注册路由，即负责具体路由加载哪一个组件