🎯 回首頁

前端行動家共筆_0421class

👉 程式碼下載

install

npm install react-router-dom@5.2.0

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

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>
// );

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();


if(module.hot){
  module.hot.accept();
}

App.js

import './App.css';
import { BrowserRouter as Router, Switch, Route} from "react-router-dom";
import Dashboard from './components/Dashboard';
import Settings from './components/Settings';
import Sidebar from './components/Sidebar';
import Visuallizations from './components/Visuallizations';

function App() {
  return (
    <div>
      <Router>
        <Sidebar />
        <hr />
        <Switch>
          <Route exact path="/"><Dashboard/></Route>
          <Route path="/Settings"><Settings/></Route>
          <Route path="/Visuallizations"><Visuallizations/></Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

Dashboard.js

import React from "react";

function Dashboard(){
    return (
        <div className="dashboard">
            <p> There is Dashboard </p>
        </div>
    );
}

export default Dashboard;

Settings.js

import React from "react";

function Settings(){
    return (
        <div className="settings">
            <p> There is Settings </p>
        </div>
    );
}

export default Settings;

Visuallizations.js

import React from "react";

function Visuallizations(){
    return (
        <div className="visuallizations">
            <p> There is Visuallizations </p>
        </div>
    );
}

export default Visuallizations;

Sidebar.js

import React from "react";
import {Link} from "react-router-dom";

function Sidebar(){
    return (
        <div>
            <p> There is Sidebar </p>
            <ul>
                <li><Link to="/"> Dashboard </Link></li>
                <li><Link to="/Settings"> Setting </Link></li>
                <li><Link to="/Visuallizations"> Visuallizations </Link></li>
            </ul>
        </div>
    );
}

export default Sidebar;