iT邦幫忙

2021 iThome 鐵人賽

DAY 15
1
自我挑戰組

網頁設計師轉職前端工程師的血淚辛酸路系列 第 19

Day - 19 分開頁面

這在好幾章以前有提過,我希望能透過增加不同的分頁使每個練習分門別類,當然,要完成的作品也是。

但拜讀了一些文章,似乎是只要從 jS 下手去操作,不需要觸碰 index.html ( 感覺很新奇! )。

我參考了這篇文章的上下篇:

【React.js入門 - 27】 我要更多更多的分頁 - react-router-dom (上)

終於完成分頁且製作出選單,其中踩了不少錯,主要是名稱我亂取的關係,若遇到檔名已經改掉還是有問題的狀況,建議重新開啟終端機跑專案就行了。


製作完分頁,再來就會想到要製作選單了吧!

我們來到上一章有提到的 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 的方式載入,跟官網的版本有些落差,請務必照著官網步驟走呀 >"<|||。


搭啦~不太好看的選單~* 不過還是很開心~,終於成功了~*


但是出現一件很詭異的事情,應該是我學藝不精,東西都跑到選單下面啦...

所以我找了這個網站練習,希望這個問題可以解決QQ

REACT TRAINING / REACT ROUTER


上一篇
Day 18 - Array List
下一篇
Day - 20 終於剩下十天之需求篇
系列文
網頁設計師轉職前端工程師的血淚辛酸路21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言