React路由器dom更改url，不呈现组件
React路由器dom更改url，不呈现组件
提问于 2021-10-16 13:39:57
我正在使用"react-router": "^5.2.1"和"react-router-dom": "^5.3.0"，当我使用history.push()时，我可以看到浏览器更改了URL，但它不会呈现在路径上侦听的组件。只有当我刷新页面时它才会呈现。当我使用history.push试图在用户单击按钮时重定向用户时，在单个页面中也会发生这种情况。任何关于我所做的wring的建议/建议都将不胜感激。
我已经尝试过用withRouter()包装我的应用程序导出，但没有任何变化。我还在<Switch>中包装了我的路由
我也在我的子页面中使用钩子。
这是我的App.js的样子：
import React ,{ useState, useEffect } from "react";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, withRouter, Redirect } from "react-router-dom";
import { useSelector } from "react-redux";
import JsonData from "./data/data.json";
import axios from "axios";
const App = () => {
const [landingPageData, setLandingPageData] = useState({});
useEffect(() => {
setLandingPageData(JsonData);
}, []);
const { user: currentUser } = useSelector(state => state.auth);
const hist = createBrowserHistory();
return (
<Router history={hist}>
{currentUser ? (
<div>
<Layout>
<Switch>
<Route path="/home" render={() => <Header data={landingPageData.Header} />} />
<Route path="/destinations" render={() => <Destinations data={landingPageData.Destinations} />} />
</Switch>
</Layout>
</div>
) : (
<div>
<Layout >
<Switch>
<Route path="/register-page" component={Register} />
<Route path="/login" component={Login} />
</Switch>
</Layout>
</div>
)}
</Router>
);
};
export default App;我的index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from "react-redux";
import { createBrowserHistory } from "history";
import * as serviceWorker from './serviceWorker';
import { store, persistor } from "./store";
import { PersistGate } from "redux-persist/integration/react";
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate persistor={persistor}>
<App />
</PersistGate>
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();回答 1
Stack Overflow用户
发布于 2021-10-16 13:45:31
React路由器DOM导出BrowserRouter而不是Router。您使用的是Router而不是BrowserRouter。
更改您的App.js
import React ,{ useState, useEffect } from "react";
import { createBrowserHistory } from "history";
import { BrowserRouter, Route, Switch, withRouter, Redirect } from "react-router-dom";
import { useSelector } from "react-redux";
import JsonData from "./data/data.json";
import axios from "axios";
const App = () => {
const [landingPageData, setLandingPageData] = useState({});
useEffect(() => {
setLandingPageData(JsonData);
}, []);
const { user: currentUser } = useSelector(state => state.auth);
const hist = createBrowserHistory();
return (
<BrowserRouter history={hist}>
{currentUser ? (
<div>
<Layout>
<Switch>
<Route path="/home" render={() => <Header data={landingPageData.Header} />} />
<Route path="/destinations" render={() => <Destinations data={landingPageData.Destinations} />} />
</Switch>
</Layout>
</div>
) : (
<div>
<Layout >
<Switch>
<Route path="/register-page" component={Register} />
<Route path="/login" component={Login} />
</Switch>
</Layout>
</div>
)}
</BrowserRouter>
);
};
export default App;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69596110
复制相关文章
相似问题
腾讯云开发者
