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

【问题标题】：What is the difference between BrowserRouter and Router in react-router?react-router中的BrowserRouter和Router有什么区别？
【发布时间】：2019-11-07 22:05:27
【问题描述】：

我正在尝试为我的应用程序实现基本路由，但被 BrowserRouter 和 Router 之间的差异所困扰。在我的情况下，Router 工作正常，BrowserRouter 路由不正常。

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


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

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

【问题讨论】：

标签： reactjs react-router

【解决方案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>

【讨论】：

【解决方案2】：

<BrowserRouter> 是一个 <Router>，它使用 HTML5 history API（pushState、replaceState 和 popstate 事件）将您的 UI 与 URL 保持在 sync 中。

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

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

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

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

点击按钮，

<Redirect to="/login" />

【讨论】：

【解决方案3】：

我认为据我所知，大多数教程和文档都使用 BrouserRouter 的别名作为路由器，否则在 react-routing 中路由器没有任何具体定义，它只是 BrouserRouter 的另一个名称，完整的解释你可以visit here

【讨论】：

【解决方案4】：

因为你的配置很棒！

这一定是你获得道具的方式。当我遇到这个链接时，我遇到了类似的问题，猜猜是什么问题。我正在使用功能性反应组件并期望以某种方式获得反应道具。

使用功能组件时的错误或可能的错误

const SignUp = (push) => {
   return (
      <Fragment>
        <input type="text" name="email" />
        <button onClick={() => push('/feed')}></button>
      </Fragment>

   )
}

push 在这个意义上是没有定义的（即不是一个函数）。它看起来像这样 { 推: () => {} }。注意它在花括号内 {}

更正

const SignUp = ({ push }) => {
   return (
      <Fragment>
        <input type="text" name="email" />
        <button onClick={() => push('/feed')}></button>
      </Fragment>

   )
}

// or

const SignUp = (props) => {
   return (
      <Fragment>
        <input type="text" name="email" />
        <button onClick={() => props.push('/feed')}></button>
      </Fragment>

   )
}

类组件中的类似错误

class SignUp extends Component {
   render() {
      return (
         <Fragment>
           <input type="text" name="email" />
           <button onClick={() => history.push('/feed')}></button>
         </Fragment>

      )
   }
}

更正

class SignUp extends Component {
   render() {
      return (
         <Fragment>
           <input type="text" name="email" />
           <button onClick={() => this.props.history.push('/feed')}></button>
         </Fragment>

      )
   }
}

如果超出此范围，您可以查看A little bit of history 或React Router v4 Unofficial Migration Guide

【讨论】：

【解决方案5】：

BrowseRrouter 创建一个新的历史记录并覆盖之前的历史记录（如果您正在使用嵌套路由）

【讨论】：