React教程(六) : React-Router 基础应用

官网参考地址：
https://reactrouter.com/web/example/basic

基础用法：
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";

<Router>
  <div>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/dashboard">Dashboard</Link>
      </li>
    </ul>


    <hr />
    <Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/dashboard">
        <Dashboard />
      </Route>
    </Switch>
  </div>
</Router>

高级用法 - 参数传递

<Router>
  <div>
    <h2>Accounts</h2>
    <ul>
      <li>
        <Link to="/google">Google</Link>
      </li>
      <li>
        <Link to="/baidu">Baidu</Link>
      </li>
      <li>
        <Link to="/bing">Bing</Link>
      </li>
    </ul>


    <Switch>
      <Route path="/:category" children={<Component01 />} />
    </Switch>
  </div>
</Router>

Component01.js

export const Component01 = (props)=>{
    let { category } = useParams();
    return(
        <div style={{width:'100vw', textAlign:'center'}}>
            { `useParams-${category}`  }
        </div>
    )
}

高级用法 - 路由嵌套
嵌套路由指子组件中套用父组件的路由。 比如父组件的路由是/user, 其下的子组件的路由是 /user/XXX。 也就是说子组件要继承父组件的路由。
参见：https://reactrouter.com/web/example/nesting

高级用法 - 自定义渲染方法
Route组件的render属性可以自定义渲染前的执行代码逻辑，通常可以在此进行身份验证。

    <Router>
        <div>
          <h2>自定义路由的渲染方法</h2>
          <ul>
            <li>
              <Link to="/public">Public</Link>
            </li>
            <li>
              <Link to="/private">Private</Link>
            </li>
          </ul>

          <Switch>
            <Route path="/public" exact render={()=>{
                
                return <Component02></Component02>
              }} />
              <Route path="/private" exact render={()=>{
                
                return <div>You are not allowed to visit this page</div>
              }} />
          </Switch>
        </div>
      </Router>

高级用法 - 自定义Link
某些情况下需要对Link做自定义，比如下面这个例子，当选中一个link，会在其左侧出现"> "。
https://reactrouter.com/web/example/custom-link

高级用法 - 阻止路由跳转
以下示例阻止离开当前页面
https://reactrouter.com/web/example/preventing-transitions

高级用法 - 处理no match
Switch中最后加上path="*"处理no match的情况

          <Route path="*">
            <NoMatch />
          </Route>

代码示例：https://reactrouter.com/web/example/no-match

最后是如何用代码控制路由跳转

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

参考：https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router