如何使用反应路由器在 URL 中使用哈希

Question

我是新来的反应并面临问题。我有一个包含两个选项卡的页面。我想制作一个哈希 URL，以便它可以根据 url 哈希重定向到相应的选项卡。同样，当我打开页面并更改选项卡时，url 也会更新。请详细回答，因为我是新手，不了解专业术语。 此外，我也必须为此使用反应路由器。 注意：我正在使用打字稿，以防它改变我的解决方案。

提前致谢。

Answer 1

HashRouter 在 URL 中使用井号符号，其效果是在服务器请求中忽略所有后续 URL 路径内容（即您发送"www.mywebsite.com/#/person/id"，服务器得到"www.mywebsite.com"。如结果，服务器将返回 pre # URL 响应，然后 post # 路径将由您的客户端 React 应用程序解析处理。

示例代码：

import React, { Component } from 'react'; 
import { HashRouter as Router, Route, Link, Switch } 
            from 'react-router-dom'; 
import Home from './component/home'; 
import About from './component/about'; 
import Contact from './component/contact'; 
import './App.css'; 

class App extends Component { 
render() { 
    return ( 
        <Router> 
            <div className="App"> 
                <ul className="App-header"> 
                <li> 
                    <Link to="/">Home</Link> 
                </li> 
                <li> 
                    <Link to="/about">About Us</Link> 
                </li> 
                <li> 
                    <Link to="/contact"> 
                        Contact Us 
                    </Link> 
                </li> 
                </ul> 
                <Switch> 
                <Route exact path='/'
                    component={Home}> 
                </Route> 
                <Route exact path='/about'
                    component={About}> 
                </Route> 
                <Route exact path='/contact'
                    component={Contact}> 
                </Route> 
                </Switch> 
            </div> 
        </Router> 
    ); 
} 
} 

export default App;