React的路由跳轉

要實現React的路由跳轉，需要用react-router-dom組件。

"react-router-dom": "^6.2.1"

在App.js配置路由

import React, { Component } from 'react';
import './App.scss';  // 引入樣式文件
import { HashRouter, Route, Routes, Navigate } from "react-router-dom";
import Home from './view/Home.jsx';
import Config from './view/Config.jsx';
import Draw from './view/Draw.jsx';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <HashRouter>
        <main>
            <Routes>
              <Route path="/home" exact element={<Home />}/>
              <Route path="/config" exact element={<Config />}/>
              <Route path="/draw" exact element={<Draw />}/>
              <Route path="*" element={<Navigate to="/home" />} />
            </Routes>
        </main>
      </HashRouter>
    );
  }
}
export default App;

新建Home.jsx，進行路由跳轉

import React, { Component } from 'react';
import { Button } from 'antd'
import { Link } from "react-router-dom";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  jumpToConfigPage(){

  }

  render() {
    return (
      <div>
        <h1>紅包幸運抽獎系統</h1>
        <center className="btns">
          <Link to="/config">
            <Button type="primary" shape="round">配置</Button>
          </Link>
          <Link to="/draw">
            <Button type="primary" shape="round">抽獎</Button>
          </Link>
        </center>
      </div>
    );
  }
}
export default Home;

新建Draw.jsx

import React, { Component } from 'react';

class Draw extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <h1>Draw</h1>
      </div>
    );
  }
}
export default Draw;

新建Config.jsx

import React, { Component } from 'react';

class Config extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <h1>Config</h1>
      </div>
    );
  }
}
export default Config;

即可。