javascript - 如何在 React 中使用历史库和

Question

我是 React-Redux 的初学者，我有一个问题，如何使用历史记录和 Link 标签来推送到某个位置。

我希望能够在我的操作中使用 history.push，所以我使用了 history JS library .我在我的应用程序文件夹中创建了一个 history.js 文件:

src/history.js

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

然后我将历史对象导入到我的 App.js 中，并将我的路由放置在具有历史记录的 Router 标记中:

源代码/App.js

<Router history={history}>

      <Switch>
        <Route path="/loginscreen" component={Loginscreen} />
        <Route path="/login" component={Login} />
        <Route path="/Property-Assistant-2018/profile" component={Profile} />
        <Route path="/Property-Assistant-2018/properties" component={Property} />
        <Route path="/Property-Assistant-2018/detail/:id" render={(props)=><PropertyDetail{...props}/>} />
        <Route path="/Property-Assistant-2018/new_property" component={NewProperty} />
        <Route path="/Property-Assistant-2018/register" component={Register} />
        <Route path="/Property-Assistant-2018/contact" component={Message} />
        <Route path="/Property-Assistant-2018/edit_property/:id" render={(props)=><EditProperty{...props}/>}/>
        <Route path="/Property-Assistant-2018" component={Initial} />

      </Switch>

但是，现在我的导航栏中的链接标签不起作用。当我点击它们时，它们只停留在初始主页。我尝试添加第二组 Switch 路由，看看我是否可以对其进行硬编码并弄清楚发生了什么，但这使得主页看起来堆叠在链接路由页面的顶部。

源代码/App.js

<Link to="/Property-Assistant-2018/contact">Contact</Link>

所以我的问题是，如何同时使用 history 和 Link 标签？我知道历史包含在 React-Router v.4 中，我一直在使用它，但我不能将它用于我的操作。

这可能是一个简单的修复，所以感谢您帮助我解决这个问题。

Answer 1

我发现了问题:

我必须用 Router 标签包裹整个 App div。

<Router history={history}>
  <div className="App">
  </div>
</Router>

这是这个 StackOverflow 问题的部分答案: How to push to History in React Router v4?