(辦公)輕松學 React-Router 4(20210401)

1. 命令創建專案:create-react-app hello-model-router
2. 安裝router:yarn add react-app-router-dom
3. 按照例子來理解:

3.1. React router介紹

  路由: path什么路徑,component跳轉到那個組件上.

   import {

  BrowserRouter as Router,

  Switch,

  Route,

  Link} from "react-router-dom";

<Router>

        <div className="container">

            <div className="row">Hello Word!</div>

        </div>

        {/* component跳轉到哪里去,path什么路徑跳轉 */}

        <Route path="/" component={Home}/>

        <Route path="/home" component={Home}/>

        <Route path="/vip" component={Vip}/>

      </Router>

3.2. React router詳細介紹:

      BrowserRouter as Router, as 表示別名

     HashRouter和BrowserRouter得區別:

      后臺系統這樣加沒關系,前臺這樣加就不怎么美觀

1. HashRouter前面有個#/

3.3. Link加個to就可以跳到指定得路由上去.

    <ul>

            <li><Link to="/">訪問主頁</Link></li>

            <li><Link to="/vip">訪問vip主頁</Link></li>

            <li><Link to="/error">訪問錯誤主頁</Link></li>

          </ul>

3.4. exact精確匹配

    下面得例子如果沒有exact精確匹配,訪問/vip會兩個都訪問到.

     <ul>

            <li><Link exact to="/">訪問主頁</Link></li>

            <li><Link to="/vip">訪問vip主頁</Link></li>

          </ul>

3.5. strict精確匹配

3.6 404錯誤頁面

import React,{Component} from "react";

class ErrorPage extends Component {

    render(){

        return (

            <div>

                404頁面

            </div>

        )

    }

}

export default ErrorPage

路由上

<Route  component={NoMatch}/>

3.7 Switch

   當配置了錯誤頁面后,訪問其他頁面,錯誤頁面也會展示出來得解決辦法.

 <Switch>

            <Route path="/" exact component={Home}/>

            <Route path="/home" exact component={Home}/>

            <Route path="/vip"  exact component={Vip}/>

            <Route path="/error" exact component={NoMatch}/>

            <Route  component={NoMatch}/>

         </Switch>

3.8 render

  換掉component變成render里面寫東西也行.

<Route path="/vip"  render={() => <div>Welcome New Home</div>}/>

<Route path="/vip"  render={() => <Vip/>}/>

<Route path="/vip"  render={(props) => <Vip {...props} name="六合童子"/>}/>

3.9 NavLink和Link一樣,可以加一些樣式

<NavLink 

                   activeStyle={{

                    fontWeight: "bold",

                    color: "blue"

                  }}  

              to="/error">訪問錯誤主頁</NavLink>

4.0  動態路由:后面內容隨便填寫:

  <Route path="/user/:id"  component={UserPage}/>

http://localhost:3000/user/123123

組件獲取:先獲取props可以看下內容,再取值.

console.log(props);

       console.log(props.match.params.id);

4.1 query string引數? 后面得&

   網址后面有引數,第一個？第二個&

   React獲取方式:

  console.log(props.location.search);

        const params = new URLSearchParams(props.location.search);

        console.log(params.get("name")); 

        console.log(params.get("a")); 

   還有一種方法是需要安裝庫得:

   yarn add query-string

import queryString from "query-string";

  let values = queryString.parse(props.location.search);

console.log(values);map型別

console.log(values.name);map型別

4.1 LInk得補充知識:

  Link可以接一個字串,也可以接一個物件

  <Link to="/courses?sort=name" />

<Link to={{

                          pathname: "/user/1",

                          search: "?sort=name",

                          state: { fromDashboard: true }

                        }}      

                >pro</Link>

console.log(props.location.state);

需要定位到某個地方,to物件里還可以加hash=#the-hash

  可以隱蔽得傳遞state

4.2 Redirect重定向

   from訪問什么地址,to跳轉到另外一個地址.

    <Redirect from="/user/:id" to="/vip"/>

4.3 history

   props.history.push('/abc')跳轉地址

4.4 withRouter高階組件

高階組件中的withRouter, 作用是將一個組件包裹進Route里面, 然后react-router的三個物件history, location, match就會被放進這個組件的props屬性中.

import React from "react";

import PropTypes from "prop-types";

import { withRouter } from "react-router";

class ShowTheLocation extends React.Component {

  static propTypes = {

    match: PropTypes.object.isRequired,

    location: PropTypes.object.isRequired,

    history: PropTypes.object.isRequired

  };

  render() {

    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;

  }

}

const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

4.5 Prompt

   用于提示用戶,導航離開頁面,重繪離開頁面,就可以做出操作

        <Prompt

                     when={!!this.state.name}

                    message="Are you want to leave?"

                    />

4.6 可以實作點擊那個link實作出現小箭頭得組件

const MenuLink = ({ children,to,exact }) => {

  const match = window.location.pathname === to;

   return (

     <Route path={to} exact={exact} children={

       ({match}) => (

        <NavLink  activeStyle={ match ? {color:"green"} : ""} to={to}  >

          { match ? '>' : ''}{children}

        </NavLink>

       )

     }/>

   )

};

4.7 配置化路由

定義一個route集合,遍歷一下放入switch

const routes = [

  {

    path:"/",

    component: Home,

    exact: true

  },

  {

    path:"/vip",

    component: Vip,

    exact: true

  }

]

   {

              routes.map( (route) => (

                 <Route

                   key={route.path}

                   {...route}

                 />

              ))

            }

還可以參考網站:

https://reactrouter.com/web/api/Link

標籤：其他

上一篇：「HTML+CSS」--自定義按鈕樣式【004】

下一篇：jQuery中的入口函式