Member.js

import React, { useState, useEffect } from 'react'
import MemberMyFiles from './MemberMyFiles'
//import MemberMyCollection from './MemberMyCollection'
//import MemberMyDiscount from './MemberMyDiscount'
//import MemberInquire from './MemberInquire'
//import NotFoundPage from './NotFoundPage'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  NavLink,
  withRouter,
} from 'react-router-dom'
import '../styles/custom.scss'
import { Container, Row, Col } from 'react-bootstrap'
import Spinner from 'react-bootstrap/Spinner'

function Member(props) {
  const [loading, setLoading] = useState(false)

  const url = props.match.url
  const path = props.match.path

  useEffect(() => {
    setLoading(true)
  }, [])

  useEffect(() => {
    setTimeout(() => {
      setLoading(false)
    }, 500)
  }, [])

  const spinner = (
    <>
      <div className="d-flex justify-content-center" id="loadmember">
        <Spinner animation="border" role="status">
          <span className="sr-only">Loading...</span>
        </Spinner>
      </div>
    </>
  )

  const display = (
    <>
      <Container>
        <Row>
          <Col md="2">
            <ul>
              <li>
                <h4>
                  <NavLink to="/Member" id="paddingbottom">
                    會員中心
                  </NavLink>
                </h4>
              </li>
              <br />
              <li id="list1">
                <h5>
                  <Link to="/Member/MemberMyFiles">個人資料</Link>
                </h5>
              </li>
              {/* <li id="list1">
                  <h5>
                    <Link to="/Member/MemberMyDiscount">我的優惠</Link>
                  </h5>
                </li>
                <li id="list1">
                  <h5>
                    <Link to="/Member/MemberMyCollection">我的收藏</Link>
                  </h5>
                </li>
                <li id="list1">
                  <h5>
                    <Link to="/Member/MemberInquire">訂單/問答/退貨查詢</Link>
                  </h5>
                </li> */}
            </ul>
          </Col>
          <Col md="10">
            <Switch>
              <Route exact path={path}>
                <h3>會員頁面</h3>
              </Route>
              <Route path={`${path}/MemberMyFiles`}>
                <MemberMyFiles />
              </Route>
            </Switch>
            {/* <Switch>
              <Route path="/Member/MemberMyFiles">
                <MemberMyFiles />
              </Route> */}
            {/* <Route path="/Member/MemberMyCollection">
                  <MemberMyCollection />
                </Route> */}
            {/* <Route path="/Member/MemberMyDiscount">
                  <MemberMyDiscount />
                </Route> */}
            {/* <Route path="/Member/MemberInquire">
                  <MemberInquire />
                </Route> */}

            {/* <Route path="/Member/*">
                  <NotFoundPage />
                </Route> */}
            {/* <Route path="/Member/MemberMyFiles/*">
                  <NotFoundPage />
                </Route>
                <Route path="/Member/MemberMyCollection/*">
                  <NotFoundPage />
                </Route>
                <Route path="/Member/MemberMyDiscount/*">
                  <NotFoundPage />
                </Route>
                <Route path="/Member/MemberInquire/*">
                  <NotFoundPage />
                </Route> */}
            {/* </Switch> */}
          </Col>
        </Row>
      </Container>
    </>
  )

  return <>{loading ? spinner : display}</>
}

export default withRouter(Member)

MyFileChangePass.js

import React, { useState, useEffect } from 'react'
import Form from 'react-bootstrap/Form'
import { Container, Col, Button } from 'react-bootstrap'
import { BrowserRouter as Router } from 'react-router-dom'

function MyFileChangePass() {
  const [validated, setValidated] = useState(false)
  const [userPW, setUserPW] = useState([])

  useEffect(() => {
    const newUserPW = localStorage.getItem('user') || '[]'
    // console.log(JSON.parse(newUser))
    setUserPW(JSON.parse(newUserPW))
  }, [])

  const handleSubmit = (event) => {
    const form = event.currentTarget
    if (form.checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()
    }

    setValidated(true)
  }

  return (
    <>
      <Router>
        <Container id="filetop">
          <Form noValidate validated={validated} onSubmit={handleSubmit}>
            <Form.Group controlId="validationCustomname">
              <Form.Label column sm="4">
                請輸入原本密碼：
              </Form.Label>
              <Col sm="6">
                <Form.Control
                  required
                  type="text"
                  placeholder="請輸入密碼"
                  //   plaintext
                />
              </Col>
            </Form.Group>

            <Form.Group controlId="validationCustomname">
              <Form.Label column sm="4">
                輸入新密碼：
              </Form.Label>
              <Col sm="6">
                <Form.Control
                  required
                  type="text"
                  placeholder="請輸入新密碼"
                  //   plaintext
                />
              </Col>
            </Form.Group>

            <Form.Group controlId="validationCustomname">
              <Form.Label column sm="4">
                確認新密碼：
              </Form.Label>
              <Col sm="6">
                <Form.Control
                  required
                  type="text"
                  placeholder="請再次輸入新密碼"
                  //   plaintext
                />
              </Col>
            </Form.Group>

            <Button type="submit">確認修改</Button>
          </Form>
        </Container>
      </Router>
    </>
  )
}

export default MyFileChangePass