The Most Simple way to use React Router. 簡易版React Router結合link使用。

React Router 結合超連結link的使用方式。

步驟

1. npm install
2. import
3. <Route> write the ALL Router code inside here ! </Route>
4. include <Link> <NavLink> : to what link (to=”/url”)
5. <Route> : to what component

import "./styles.css";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { NavLink, Link } from "react-router-dom";
const FormSend = () => {
  return <p>1</p>;
};
const Chart = () => {
  return <p>Chart</p>;
};
const About = () => {
  return <p>About</p>;
};
export default function App() {
  return (
    <>
      <Router>
        <Link to="/">
          <p>weight (๑•́ ₃ •̀๑) </p>
        </Link>
        <NavLink activeClassName="active" to="/Chart">
          <li>Chart (˘•ω•˘) </li>
        </NavLink>
        <NavLink activeClassName="active" to="/About">
          <li>About ٩(ˊᗜˋ )و</li>
        </NavLink>
        <div className="container">
          <Route exact={true} path="/" component={FormSend} />
          <Route exact path="/Chart" component={Chart} />
          <Route exaxt path="/About" component={About} />
        </div>
      </Router>
    </>
  );
}
<Route exaxt path="/About" component={About} /> 
也可以寫成 (equal to)
<Route exaxt path="/About"> <About/> </Route>

完成 ٩(ˊᗜˋ )و