Question

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

我正在使用历史记录对象。用户单击按钮时，需要将其带到登录页面 “ history.push（'/ login'）”

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

我认为，据我所知，大多数教程和文档都使用BrouserRouter的别名作为Router，否则在对Router的另一路由BrouserRouter进行反应路由时，没有路由器的具体定义，您可以{{3}进行详细说明}

Answer 3

<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" />

Answer 4

因为您的配置很棒！。

一定是您获取道具的方式。当我遇到此链接时，我遇到了类似的问题，请猜测是什么问题。我正在使用功能性react组件，并希望以某种方式获得react道具。

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

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

Answer 5

BrowseRrouter创建一个新的历史记录，并覆盖前一个历史记录（仅当您使用嵌套路由时）

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

5 个答案:

因为您的配置很棒！。

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

更正

类组件中的类似错误

更正