react-router中的BrowserRouter和Router有什么区别？

Question

我正在尝试为我的应用程序实现基本路由，但遇到了 BrowserRouter 和 Router 之间的区别。在我的情况下，路由器工作正常，BrowserRouter 没有正确路由。

我正在使用历史对象。当用户点击一个按钮时，它需要被带到登录页面 history.push('/login')

const Routing = () => 
    <Router history={history}>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/login" component={Login} />
        </Switch>
    </Router>

以上一项工作，但如果我使用 BrowserRouter 而不是路由器，它无法正常工作。

Answer 1

简而言之，它们彼此相等：

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter>
  <App />
</BrowserRouter>

和

import { Router } from 'react-router-dom'
import { createBrowserHistory } from 'history'

const history = createBrowserHistory()

<Router history={history}>
  <App />
</Router>

Answer 2

<BrowserRouter>是<Router>一个使用HTML5 history API（pushState的，replaceState和popstate事件），让您UI在sync使用的URL。

所以你的路线应该是这样的，

const Routing = () => <BrowserRouter> <Switch> <Route exact path="/" component={Home} /> <Route path="/login" component={Login} /> </Switch> </BrowserRouter>

对于单击按钮的导航，您可以Redirect从react-router-dom包中使用。

import { Redirect } from 'react-router-dom'

点击按钮，

<Redirect to="/login" />

Answer 3

我认为据我所知，大多数教程和文档都使用 BrouserRouter 的别名作为 Router，否则在反应路由中 Router 没有任何具体定义，它只是 BrouserRouter 的另一个名称，有关完整说明，您可以访问此处