Day18 React-Router(三)路由跳转

设置好route後，使用react-router-dom提供的方法，在画面上呈现连结跟操作，来让使用者在网站上前往不同的页面。

Link

Link：会产生Html中 a 连结的效果，能够在点击後转址到指定route。由Link转址後，url会改变、元件会重新渲染，但是页面不会重新载入。

to：

指定要重新导向的路径，使用字串指定path，或是以一个物件形式传送path的设定
(path物件格式设定，会在後面元件接收route资讯文章中一起整理）

import { Link } from 'react-router-dom';

<Link to="/home">首页</Link>

replace：

点选连结後让新url用取代的方式替换掉原本url的纪录。

<Link replace to="/home">首页</Link>

另外Link可以像其他DOM标签一样传入classsName、title、id等属性给之後产生的DOM

<Link to="/home" className="nav" title="home" id="nav-home">首页</Link>

NavLink

除了产生点击转址的连结外，与当前 URL和NavLink的to路径匹配时，可以为NavLink产生出来的DOM新增样式属性。

to：

和Link用法相同。

import { NavLink } from 'react-router-dom';

<NavLink to="/home">首页</NavLink>

activeClassName：

点击转址後，URL和to路径匹配时呈现启用状态，NavLink的DOM元素会套用activeClassName中的字串为className。

（如果没套用此属性，启用後，className预设为 active。）

<NavLink to="/home">Nav首页</NavLink> //启用後加入className active
<NavLink to="/1" activeClassName="thick">Nav路由1</NavLink>

activeStyle：

点击启用後，css style以物件传入DOM套用样式。

const activeStyle:object = {
  fontWeight: 'bolder',
  color: 'green'
};

//JSX
<NavLink to="/home" activeStyle={activeStyle} >首页</NavLink>

isActive：

转址前可以经由isActive传入的函式，判断连结是否处於启用状态的。

const activeStyle:object = {
  fontWeight: 'bolder',
  color: 'green'
};

//JSX
<NavLink to="/home" activeStyle={activeStyle} >首页</NavLink>

exact：url路径一定要和path完全相同
strict：在有exact的情况下搭配使用，检查url的斜线是否也和to完全相同，让url和path的匹配更严谨。

useHistory

useHistory 回传一个history物件, 里面包含许多方法可以进行转址设定。
例如说：push('/path')，将url推到参数指定的path中。

import { Link } from 'react-router-dom';

const goPath =useHistory();//设常数接收useHistory()回传的物件
const togglePath = ()=>{
    setPath(path===1?2:1) 
    goPath.push(`/${path}`)
  }

//jsx
<button onClick={()=>goPath.push('/home')}> 回首页 </button>

其他方法 https://juejin.cn/post/6860862817520582663中有列出，有兴趣依依去搜寻。

1.action: "PUSH"

2.block: ƒ block(prompt)

3.createHref: ƒ createHref(location)

4.go: ƒ go(n)

5.goBack: ƒ goBack()

6.goForward: ƒ goForward()

7.length: 30

8.listen: ƒ listen(listener)

9.location: {pathname: "/home/m1", search: "", hash: "", state: undefined, key: "6odisu"}

10.push: ƒ push(path, state)

11.replace: ƒ replace(path, state)

12.proto: Object

下面是以上方法的练习程序码，可以自由添加属性查看属性功能。

import React,{useState} from 'react';
import { Route, Switch,Link,NavLink,useHistory } from 'react-router-dom';
import './App.scss';
import One from '../contanier/One/One';
import Two from '../contanier/Two/Two';

function Home(){
  return(
  <h1>
    HOME
  </h1>)
}

//设定style
const activeStyle:object = {
  fontWeight: 'bolder',
  color: 'green'
};

//App元件
function App() {
 
  const [path,setPath]=useState(1)

  const goPath =useHistory();
  const togglePath = ()=>{
    setPath(path===1?2:1) 
    goPath.push(`/${path}`)
  }

  const dontGo=()=>{
    return false
  }

  return (
    <div className="App wrap">
      <div className="margin-bottom-10  flex">
	      <Link to="/home" >首页</Link>
	      <Link to="/1" className="nav">路由1</Link>
	      <Link to="/2">路由２</Link>
	    </div>

      <div className="margin-bottom-10  flex">
	      <NavLink to="/home">Nav首页</NavLink>
	      <NavLink to="/1" activeClassName="thick">路由1:activeClassName</NavLink>
	      <NavLink to="/2" activeStyle={activeStyle}>路由2:activeStyle</NavLink>
	      <NavLink to="/2" isActive={dontGo}>路由2:isActive</NavLink>
      </div>

      <div className="margin-bottom-10  flex">
        <button onClick={()=>goPath.push('/home') }>回首页</button>
        <button onClick={togglePath}>切换route</Button></button>
			</div> 
      
      <Switch>
          <Route  path='/home' component={Home} />
          <Route  path='/1' component={One} />
          <Route  path='/2' component={Two} /> 
      </Switch>
     
    </div>
  
  );
}

export default App;