react router dom v5-Link有效，但Redirect和history.push()无效

Question

EDIT：我很不好意思地说，答案是我发送给Redirect和history.push((的URL中的拼写错误。所以，对于任何想知道的人来说，似乎Link、Redirect、history.push((应该是一样的。

---

为什么链接可以完全工作，而Redirect和history.push((只更新URL，而不在该URL呈现组件？

我想做以下事情：

• 用户点击一个按钮，该按钮通过Redux操作创建者调用服务器端函数
• 服务器函数将数据写入Firebase Firestore
• server函数将操作创建者使用的文档ID返回到history。push((在前端显示新文档的特定URL

这会在浏览器中产生正确的URL，但不会呈现它应该呈现的组件。我测试了对重定向和指向同一URL的链接进行硬编码，只有链接才能完全工作。

我尝试过的：

• 使用BrowserRouter、Router和HashRouter
• 将所选路由器置于应用程序组件外部和内部
• 使用useHistory((访问历史记录并将历史记录从我的组件传递给动作创建者
• 使用历史配置文件，将其作为组件传递给Router，并将其导入操作创建者文件

index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Router } from 'react-router-dom'
import history from './config/history'
// firebase and store config ommitted
ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<Router history={history} >
<App />
</Router>
</ReactReduxFirebaseProvider>
</Provider>,
document.getElementById('root')
);

history.js

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

动作创建者

import history from '../../config/history'
export const importWebsite = (data) => {
return (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase()
const profile = getState().firebase.profile
const userId = getState().firebase.auth.uid
data = {
...data,
userFirstName: profile.firstName,
userLastName: profile.lastName,
username: profile.username,
userId: userId,
}
const pull_website = firebase.functions().httpsCallable('pull_website')
pull_website(data)
.then((res) => {
dispatch({ type: 'IMPORT_SUCCESS' })
history.push('/websites/' + res.data.id)
}).catch((err) => {
dispatch({ type: 'IMPORT_FAIL', err })
})
}
}

Answer 1

除非有任何奇怪的事情，比如将应用程序的一部分呈现为多个Router组件，否则我认为这里的问题是您的路由上下文在redux提供程序内部，或者换句话说，在ReactTree中，没有高于redux提供方(和异步操作中间件(的Router或路由上下文。

解决方案：将Router包裹在Provider上。

ReactDOM.render(
<Router history={history} >
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
</Provider>
</Router>,
document.getElementById('root')
);