Question

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

我希望能够在我的操作中使用history.push，因此我使用了history JS library。我在app文件夹中创建了一个history.js文件：

的src / history.js

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

然后我将历史对象导入到我的App.js中，并将我的路径放在带有历史记录的路由器标记中：

的src / 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路由，看看我是否可以对其进行硬编码并弄清楚发生了什么，但这使得主页看起来堆叠在Link路由页面的顶部。

的src / App.js

<Link to="/Property-Assistant-2018/contact">Contact</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?

Answer 2

你能显示代码吗

const history = useHistory();
useEffect(() => {
    console.log('moved')
}, [history]);

我在每次 url 更改时都有这个，但是不起作用，但是当我控制台记录 useHistory 每秒钟都是不同的并且 useEffect 没有检测到变化

如何在React中使用历史库和<link />

2 个答案: