Router - ly-yuan-kai/Demo GitHub Wiki

需安裝套件

npm i react-router-dom --save

Router用來比對URL以及比對完後要執行的程式碼。

for example:

class Main extends Component {
  render() {
    return(
      <HashRouter>
        <div className="margin">
         <h1>React Demo</h1>
          <ul>
            <li><NavLink to="/home">Home</NavLink></li>
            <li><NavLink to="/demo">Demo</NavLink></li>
            <li><NavLink to="/clock">Timer</NavLink></li>
          </ul>
          <Route path="/home" component={Home}/>
          <Route path="/demo" component={Demo}/>
          <Route path="/clock" component={Clock}/>
        </div>
      </HashRouter>
    )
  }
}

當點擊連結的URL為/home時，Route則會顯示HOME的component。

連結跳轉時頁面並不會重新刷新，使頁面達成一頁式的效果。

⚠️ **GitHub.com Fallback** ⚠️