Day7 React-router

前言

今天要讲router，算是开发中很重要的一环，设计良好的路由，对於使用者的体验是很加分的，但这边不会聊到深，只会讲基本的环境搭建，跟用法

下载

npm install --save react-router-dom

这边你可能会问，奇怪不是router吗？怎麽多出了一个react-router-dom?其实是这样的react-router-dom跟react-router是一样东西，只是多了： BrowserRouter、 HashRouter、Link、NavLink

正式开始

下载好以後回到App.js资料夹，输入下方程序码，

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

function App() {
  return (
    <Router>
      <Link to="/">xxx</Link> //主要Link设置
      <Link to="/xxx">xxx</Link>
    <Switch>
        <Route path="/" exact component={xxx}></Route> // Link连结Component
        <Route path="/xxx" exact component={xxx}></Route>
    </Switch>
    </Router>
  );
}

export default App;

这边来说一下怎麽运作的

首先你需先用BrowserRouter把所有router配置包起来，然後这边有三个需要注意的switch, route, link
switch 这是切换路由时的判断，就好像switch...case的感觉
route 这是路由基本资讯，会以这个为基准，里面显示什麽component搭配什麽path
link 这是切换的方法，按下这个link会去找对应的component

Github 这边我在github有写一个简单的router，不懂的话可以去看看