今日文章目录

• 需求说明
• 过程纪录
• 参考文章

今天来练习Router切换页面。

需求说明

• 两个页面：登入页、显示页
• 逻辑规划：(这次只会做到检查帐号、密码有填，就当作成功。)
  

过程纪录

• 显示页使用原本的ToDoPage(加入登出钮)，新增登入页LoginPage(加入登入钮)。
• 页面 router 规划：我使用 react-router-dom来练习。
• react-router-dom 四大核心: Router Switch Route Link
• Router: 规范切换页面的影响范围。
• Link: 指定切换页面路径位置的其中一个方法。
• Switch Route: Switch比对Route路径，路径符合Route，执行转换页面。

直接来看例子：

1. 安排路径path与对应的显示页面component：

const routes = [
  {
    exact: true,
    path: '/',
    component: <LoginPage />,
  },
  {
    path: '/toDoPage',
    component: <ToDoPage />,
  },
  {
    path: '/loginPage',
    component: <LoginPage />,
  },
];

2. 在App.jsx(所有页面的集散地)加入Router Switch Route。

function App() {
  return (
    <Router>
      <Switch>
        {routes.map((item) => (
          <Route
            key={item.path}
            exact={item.exact}
            path={item.path}
          >
            {item.component}
          </Route>
        ))}
      </Switch>
    </Router>
  );
}
export default App;

(补充) exact: 代表 Switch在比对路径，指定路径要完全等同path，才满足条件。
这在针对主页path: '/'都建议要加，来看看差异：

(一) 没加exact的话:
如果我页面要指向path: '/toDoPage'，但Switch先爬到第一个且符合要求path="/"，页面就直接指向LoginPage，就不会看到ToDoPage。

<Router>
  <Switch>
      <Route path="/">
          <LoginPage />
      </Route>
      <Route path="/toDoPage">
          <ToDoPage />
      </Route>
 </Switch>
</Router>

(二) 改善的方法1: 把path="/"条件放在最後一个，这样Switch就会先找到ToDoPage。

<Router>
  <Switch>
      <Route path="/toDoPage">
          <ToDoPage />
      </Route>
      <Route path="/">
          <LoginPage />
      </Route>
 </Switch>
</Router>

(三) 改善的方法2: 把path="/"加入exact，Switch符合100%符合的路径，才会转换。

<Router>
  <Switch>
      <Route exact path="/">
          <LoginPage />
      </Route>
      <Route path="/toDoPage">
          <ToDoPage />
      </Route>
 </Switch>
</Router>

4. 在需要转换页面的地方加入Link: 这里to的路径要对应到上方的path。

<Link to="/loginPage">登入页面</Link>

5. 使用Router提供useHistory()方法，指定路径切换：

export default function LoginPage() {
  const history = useHistory();
  const handleSubmit = () => {
      history.push('/toDoPage');
  };
  
  return(
    <Button 
      type="primary" 
      htmlType="submit" 
      onClick={handleSubmit}
    >
        Submit
    </Button>
  )
}

参考文章

• react-router-dom