技術標籤：# Reactreact

路由

ReactRouter三大元件：
Router：所有路由元件的根元件（底層元件），包括路由規則的最外層容器，可以再一個元件寫多個
Route：路由規則匹配元件，顯示當前規則對應的元件
Link：路由跳轉的元件，to屬性可以傳路徑也可以傳物件；replace屬性點選連結後，直接替換成歷史訪問記錄的原地址

動態路由：

function Product(props) {
  return (
    <div>
      <h1>產品頁面，產品ID：{props.match.params.id}</h1>
    <
 
/div>
  )
}
<Link to="/product/123">Product</Link>
<Route path="/product/:id" component={Product}></Route>

全部程式碼：

import React from 'react';

// history模式/後端匹配使用
import {BrowserRouter as Router,Link,Route} from 'react-router-dom';

function Home() {
  return (
    <
 
div>
      <h1>首頁</h1>
    </div>
  )
}
function Me(props) {
  console.log(props)
  return (
    <div>
      <h1>個人中心</h1>
    </div>
  )
}
function Product(props) {
  return (
    <div>
      <h1>產品頁面，產品ID：{props.match.params.id}</h1>
    <
 
/div>
  )
}

class App extends React.Component {
  render() {
    let meObj = {pathname: "/me", search: "?username=admin", hash: "#abc", state: {msg: "hello"}}
    return (
      <div id="app">
        <Router basename="/admin">
          <div className="nav">
            <Link to="/">Home</Link>
            <Link to="/product/123">Product</Link>
            <Link to={meObj} replace>個人中心</Link>
          </div>
          <Route path="/" exact component={Home}></Route>
          <Route path="/product/:id" component={Product}></Route>
          <Route path="/me"  component={Me}></Route>
        </Router>
      </div>
    )
  }
}

export default App;

路由重定向

訪問某個元件時，如果有重定向元件，那麼就會修改頁面的路徑，使得頁面內容顯示為所定向路徑的內容
Switch元件
可以使Switch元件內容的route只匹配到一個（多個重複），只要匹配到了，剩餘的路由規則將不再匹配

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

function LoginInfo(props) {
  if (props.location.state.loginState === 'success') {
    // 重定向 用的比較少 可以自己設定跳轉的頁面
    return <Redirect to='/'></Redirect>
  } else {
    return <Redirect to='/login'></Redirect>
  }
}

let FormCom = ()=>{
  let pathObj = {pathname: '/logininfo', state: {loginState: 'success'}}
  let pathObj2 = {pathname: '/logininfo', state: {loginState: 'fail'}}
  return (
    <div>
      <h1>表單驗證</h1>
      <Link to={pathObj}>登入驗證後的頁面1</Link>
      <Link to={pathObj2}>登入驗證後的頁面2</Link>
    </div>
  )
}
// 不用Link實現跳轉
class ChildCom extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.clickEvent}>跳轉到首頁</button>
      </div>
    )
  }
  clickEvent = () => {
    // this.props.history.go(1) 前進  等的方法
    this.props.history.push("/",{msg: "這是由ChildCom元件發給首頁的資料"})
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Router>
          <Switch>
            <Route path='/' exact component={(props)=>{console.log(props);return (<h1>首頁</h1>)}}></Route>
            <Route path='/form' exact component={FormCom}></Route>
            <Route path='/login' exact component={()=>(<h1>登入頁</h1>)}></Route>
            <Route path='/logininfo' exact component={LoginInfo}></Route>
            <Route path='/123' exact component={()=>(<h1>1</h1>)}></Route>
            <Route path='/123' exact component={()=>(<h1>2</h1>)}></Route>
            <Route path='/child' exact component={ChildCom}></Route>
          </Switch>
        </Router>
      </div>
    )
  }
}

export default App;