Day - 19 分开页面

这在好几章以前有提过，我希望能透过增加不同的分页使每个练习分门别类，当然，要完成的作品也是。

但拜读了一些文章，似乎是只要从 jS 下手去操作，不需要触碰 index.html ( 感觉很新奇！）。

我参考了这篇文章的上下篇：

终於完成分页且制作出选单，其中踩了不少错，主要是名称我乱取的关系，若遇到档名已经改掉还是有问题的状况，建议重新开启终端机跑专案就行了。

制作完分页，再来就会想到要制作选单了吧！

我们来到上一章有提到的 React Bootstrap

依照顺序安装。

然後再已经分好的页面中放上 offcanvas ，我的切法如下

Layout.js

import React, {useState} from "react";
import {Offcanvas} from 'react-bootstrap'
import {Link} from 'react-router-dom';
import {Button} from 'react-bootstrap';
const Layout=(props)=>{

  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return(
  
    <div>
    <Button variant="primary" onClick={handleShow} className="me-2" placement="start">
    Menu
    </Button>
    <Offcanvas show={show} onHide={handleClose} {...props}>
      <Offcanvas.Header closeButton>
        <Offcanvas.Title></Offcanvas.Title>
      </Offcanvas.Header>
      <Offcanvas.Body>
        <nav>
          <Link to="/">Index</Link><br />
          <Link to="/HelpMe" >Help Me</Link>
        </nav> 
        {props.children}
      </Offcanvas.Body>
    </Offcanvas>
    </div>
  );
}
export default Layout;

App.js

import React from 'react';
import {HashRouter,Route,Switch} from "react-router-dom";

import HelpMe from "./HelpMe";
import Layout from "./Layout";

import './App.css';

const App=()=>{
    return( 
      <HashRouter>
        <Switch>
            <Layout>
                <Route exact path="/"/>
                <Route path="/HelpMe" component={HelpMe}/>
            </Layout>
        </Switch>

        </HashRouter>
    );
}
export default App;

以上很感谢布鲁斯前端的各位好友协助！

因为我用 CDN 的方式载入，跟官网的版本有些落差，请务必照着官网步骤走呀 >"<|||。

搭啦～不太好看的选单～＊不过还是很开心～，终於成功了～＊