react路由两种路由的详情使用

React 路由有两种类型的路由，分别是 HashRouter 和 BrowserRouter。

1. HashRouter

HashRouter 是基于 URL 的 hash（#）部分实现的路由。它在 URL 的 hash 改变时，渲染相应的组件。这种路由类型在服务器端无需特殊配置，适用于静态网站和单页应用程序。在使用 HashRouter 时，需要导入 HashRouter 组件，并将需要路由的组件包裹在 Router 组件内。

import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </HashRouter>
  );
};

export default App;

2. BrowserRouter

BrowserRouter 是基于浏览器的 History API 实现的路由。它在 URL 发生变化时，渲染相应的组件。这种路由类型在服务器端需要特殊配置，适用于动态网站。在使用 BrowserRouter 时，需要导入 BrowserRouter 组件，并将需要路由的组件包裹在 Router 组件内。

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
};

export default App;

无论使用哪种路由类型，都需要使用 `Route` 组件来定义路由，并将需要路由的组件作为其 `component` 属性的值。在多个路由中，需要使用 `Switch` 组件来确保只有一个路由被匹配。