13React Router

装React Router

npm install react-router-dom

精准匹配： exact为true即可。赋值要写在大括号里，不然用引号是字符串。
404：使用Switch组件解决

import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter, Route, Switch} from "react-router-dom";
// 组件
const RootPage = () => (
    <p>我是预算的应用</p>
)
const AddExpensePage = () => (
    <p>我是添加预算的页面</p>
)
const Edit = () => (
    <p>我是编辑页面</p>
)
const Help = () => (
    <p>我是帮助页面</p>
)
const NotFoundPage = () => (
    <h3>404, 你访问的页面不存在。</h3>
)
const routes = (
    <BrowserRouter>
        <Switch>
            <Route path="/" exact={true} component={RootPage}/>
            <Route path="/create" component={AddExpensePage}/>
            <Route path="/edit" component={Edit}/>
            <Route path="/help" component={Help}/>
            <Route component={NotFoundPage}/>
        </Switch>
            
    </BrowserRouter>
)
ReactDOM.render(routes, document.getElementById("root"));

返回首页，但不刷新页面：

const NotFoundPage = () => (
    <div>404, 你访问的页面不存在。<Link to="/">回到首页</Link></div>
)

const Header = () => (
    <header>
        <Link to="/">首页</Link>
        <Link to="/create">新增</Link>
        <Link to="/edit">编辑</Link>
        <Link to="/help">帮助</Link>
    </header>
)
const routes = (
   
    <BrowserRouter>
        <div>
            <Header />
            <Switch>
                <Route path="/" exact={true} component={RootPage}/>
                <Route path="/create" component={AddExpensePage}/>
                <Route path="/edit" component={Edit}/>
                <Route path="/help" component={Help}/>
                <Route component={NotFoundPage}/>
            </Switch>
        </div>  
    </BrowserRouter>
)

NavLink是Link的升级版，可以增加样式。
activeClassName="is-active"属性在点击时被激活，可以写样式文件。

const Header = () => (
    <header>
        <NavLink activeClassName="is-active" exact={true} to="/">首页</NavLink>
        <NavLink activeClassName="is-active" to="/create">新增</NavLink>
        <NavLink activeClassName="is-active" to="/edit">编辑</NavLink>
        <NavLink activeClassName="is-active" to="/help">帮助</NavLink>
    </header>
)

独立成组件：

import React from "react";
import {BrowserRouter, Route, Switch} from "react-router-dom";
import RootPage from "../RootPage";
import Edit from "../Edit";
import Help from "../Help";
import AddExpensePage from "../AddExpensePage";
import Header from "../Herader";
import NotFoundPage from "../NotFoundPage";

const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header />
            <Switch>
                <Route path="/" exact={true} component={RootPage}/>
                <Route path="/create" component={AddExpensePage}/>
                <Route path="/edit" component={Edit}/>
                <Route path="/help" component={Help}/>
                <Route component={NotFoundPage}/>
            </Switch>
        </div>  
    </BrowserRouter>
)
export default AppRouter;

Route的一些默认Props：

import React from "react";
const Help = (props) => {
    console.log(props)
    return (
    <p>帮助 help</p>
    )
}
export default Help;

history中包含一些跳转功能；
location中包含一些URL信息；
match中包含params，可以向后台发送一些请求；