我正在嘗試更改 Redux Thunk 操作創建器中的頁面，以便在用戶提交表單后將其帶回“家”
呼叫動作創建者時 url 會改變，但頁面不會改變
我不能使用，BrowserRouter因為我正在創建自己的實體history，但是每當我使用時，Router我都會收到錯誤
TypeError：無法讀取未定義的屬性（讀取“路徑名”）
我嘗試參考這個與我遇到的完全相同的問題，但它也沒有解決。給出的唯一答案只是拋出相同的錯誤，但替換pathname為createHref
不用說，我非常感謝任何能讓我擺脫困境的人
這是代碼：
歷史.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
應用程式.js
import React from 'react'
import { Router, Routes, Route } from 'react-router-dom'
import history from '../history'
import StreamCreate from './streams/StreamCreate'
import StreamDelete from './streams/StreamDelete'
import StreamEdit from './streams/StreamEdit'
import StreamList from './streams/StreamList'
import StreamShow from './streams/StreamShow'
import Header from './Header';
const App = () => {
return (
<div className="ui container">
<Router history={history}>
<Header />
<Routes>
<Route path="/" exact element={ <StreamList /> } />
<Route path="/streams/new" exact element={ <StreamCreate /> } />
<Route path="/streams/edit" exact element={ <StreamEdit /> } />
<Route path="/streams/delete" exact element={ <StreamDelete /> } />
<Route path="/streams/show" exact element={ <StreamShow /> } />
</Routes>
</Router>
</div>
)
}
export default App
行動
import history from '../history';
export const createStream = (formValues) => async (dispatch, getState) => {
const { userId } = getState().authReducer // userId from auth
const { data } = await streams.post('/streams', { ...formValues, userId })
dispatch({ type: CREATE_STREAM, payload: data })
history.push("/")
}
uj5u.com熱心網友回復：
您可以將此歷史責任與推送到分派此操作的組件分開。從您的組件調度后，您可以使用鉤子useNavigate()導航到/.
歷史在 react-router v6 中不起作用。
uj5u.com熱心網友回復：
如果您碰巧遷移到 react 路由器 6，那么您可能需要查看他們的遷移指南
React Router v6 引入了一個新的導航 API，它與支持懸念的應用程式具有更好的兼容性。
您可以使用useNavigate()鉤子，然后可以訪問導航
let navigate = useNavigate();
uj5u.com熱心網友回復：
exact反應路由器v6 不再支持history。
// old - v5 <Route exact path="/" component={Home} />
// new - v6 <Route path="/" element={<Home />} />
const navigate = useNavigate();
uj5u.com熱心網友回復：
事實證明，仍然可以維護一個全域歷史實體，以便將編程導航抽象到您的動作創建者仍然是可能的
很高興見到你，unstable_HistoryRouter（：
import { createBrowserHistory } from 'history';
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
let history = createBrowserHistory();
function App() {
return (
<HistoryRouter history={history}>
// The rest of your app
</HistoryRouter>
);
}
history.push("/foo");
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/450516.html