react-配置前端路由

概念：

一个web应用包含多个HTML页面，这个应用称为多页面应用。页面路由由服务端控制，这种路由方式称为：后端路由。

当url改变但是并没有像后台发出请求，这种页面应用称为单页面应用。路由控制方式叫做前端路由。

react实现前端路由：

1.安装包：cnpm install  react-router-dom

2.配置路由：

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import Login from "./components/Login";

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
          <Route path="/posts" component={Home} />
        </Switch>
      </Router>
    );
  }
}

export default App;

解析：

路由由两个标签组成：Router和Route，前者相当于路由器，后者是前者的子组件，指定一个地址的跳转。

Reacter有两个封装好的组件：<BrowserRouter/> 和<HashRouter>,一般建议用这两个组件，不建议直接用Router

import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import DefaultLayout from './layouts/DefaultLayout/DefaultLayout';
import LoginUser from './layouts/LoginUser/LoginUser';
import home from './routes/Home/Home'
export default class RouterWrap extends Component {
    render() {
        return (
            <div id="router">
                <HashRouter>
                    <Switch>
                        <Route path="/" component={LoginUser} exact />
                        <Route path="/home" component={DefaultLayout}  />
                        <Route path="/home2" component={home}  />
                    </Switch>
                </HashRouter>
            </div>
        )
    }
}

Route路由常用属性解释：

path：适配的路径

exact：若配置则精准匹配，否则则是部分匹配。

component：若匹配则渲染该组件 

switch标签：只匹配子标签中的一个，相当于java swith关键字

Link标签：

链接组件：相当于a标签

<span className="right-link">
      <Link to={{ pathname: "/login", state: { from: location } }}>
          登录
       </Link>
</span>

to属性可以是string可以是object，若为object，则有4个属性：

{

pathname：‘/posts’,

search:'?sort=name',

hash:'#the-hash',

state:'{fromHome:true}'

}