AntD+ReactRouter 脚手架

一、说明：

本文接前一文react-scripts 搭建简化的SPA+AntD脚手架
，加入React Router功能。参考文档react router 英文官网。
项目代码：https://github.com/johnyu666/react-antd-reactRouter-scaffold

二、加入router库

johnDev $ yarn add react-router-dom

目前加入的是5.2.0的版本。

三、简单测试

App.js

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

function Home() {
    return <h2>Home</h2>;
}

function About() {
    return <h2>About</h2>;
}

export default function App() {
    return (
        <Router>
            <div>
                <nav>
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/about">About</Link></li>
                    </ul>
                </nav>

                <Switch>
                    
                    <Route path="/about">
                        <About />
                    </Route>
                    <Route path="/">
                        <Home />
                    </Route>
                </Switch>
            </div>
        </Router>
    )
}

四、结合Ant Degsin 的布局技术

App.js

import { Typography, Space, Row, Col, Layout } from 'antd';


const { Title, Text, Paragraph } = Typography;
const { Header, Content, Footer, Sider } = Layout;

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

function Home() {
    return <h2>Home</h2>;
}

function About() {
    return <h2>About</h2>;
}

export default function App() {
    return (
        <Layout>
            <Header style={{ color: 'white' }}>Header</Header>
            <Router>
                <Layout>
                    <Sider style={{ color: 'blue', height: 200,backgroundColor:'darkgray' }}>
                        <ul>
                            <li>
                                <Link to="/">Home</Link>
                            </li>
                            <li>
                                <Link to="/about">About</Link>
                            </li>
                        </ul>
                    </Sider>
                    <Content>
                        <Switch>
                            <Route path="/about">
                                <About />
                            </Route>
                            <Route path="/">
                                <Home />
                            </Route>
                        </Switch>
                    </Content>
                </Layout>
            </Router>
            <Footer style={{color:"white",backgroundColor:'black'}}>Footer</Footer>
        </Layout>


    )
}