react中怎么实现通过hash值跳转不同的页面

前置条件先知道什么什么是 hash模式 和hash值

hash值： localhost:3000/#/page

#之后的部分就是hash值，它有两个特点：

1. hash值的变化(地址栏中改了hash值再回车)不会重新发请求。它不是请求路径的一部分。

2. hash值的变化会触发hashChange事件。

如何获取到哈希值的变化呢?  我们可以模拟一下

window.addEventListener('hashchange', onChange)

在window 注册一个hashchange事件

  const [curHash, setCurHash] = useState('')
 useEffect(() => {
    const onChange = () => {
      // console.log(window.location.hash)
      setCurHash(window.location.hash.slice(1))
    }
    onChange()
    window.addEventListener('hashchange', onChange)
    return () => {
      window.removeEventListener('hashchange', onChange)
    }
  }, [])

此段代码是reacr中的useEffect 副作用函数,看不懂的可以去掉 不影响

当哈希值改变时就会触发hashchange事件 执行onChange回调函数

window.location.hash 可以获取当前的哈希值  #/page 

然后就可以通过这个值来匹配相应的路径 来显示不同的组件

      {curHash === '/home' && <Home />}
      {curHash === '/search' && <Search />}
      {curHash === '/comment' && <Comment />}