React 应用程序路由不会加载内容，除非页面重新加载

我一直在开发一个react单页应用程序，并试图让路由正常工作。

我相信路由本身确实有效，但除非手动重新加载页面，否则页面不会加载正确的内容。浏览器前后箭头也可以。

例如，我可以导航到localhost:3000fine，并且内容已正确加载，但当我按下按钮导航到localhost:3000/contacts时，除非刷新页面，否则不会显示任何内容。手动刷新后，会显示联系人页面。什么东西？

index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom';
// Import App component
import App from './App'
// Import service workers
import * as serviceWorker from './serviceWorker'
// Render App component in the DOM
ReactDOM.render(
<Router>
<App />
</Router>
, document.getElementById('root')
)
serviceWorker.unregister()

App.tsx

// Import necessary dependencies
import React from 'react'
import Routes from './Routes'
// Create App component
function App() {
return (
<div className="App">
<Routes />
</div>
)
}
export default App

历史.tsx

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

主页/主页.tsx

import React, { Component } from "react";
import history from './../history';
import "./Home.css";
export default class Home extends Component {
render() {
return (
<div className="Home">
hello home
<button onClick={() => history.push('/Contact')} value='click here'>Get Started</button>
</div>
);
}
}

联系人/联系人.tsx

import React, { Component } from 'react';
class Contact extends Component {
render() {
return (
<div>
hello world
</div>
);
}
}
export default Contact;

Routes.tsx

import React, { Component } from "react";
import {BrowserRouter, Router, Switch, Route } from "react-router-dom";
import Contact from "./Contact/Contact";
import Home from "./Home/Home"
import history from './history'
export default class Routes extends Component {
render() {
return (
<div>
<Router history={history}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/Contact" component={Contact} />
</Switch>
</Router>
</div>
)
}
}

任何帮助都非常感谢

我认为有一些额外的代码可能会导致冲突。您从react-router-dom定义路由器两次：

一旦到这里，在index.tsx中

ReactDOM.render(
<Router> // here
<App />
</Router>
, document.getElementById('root')
)

然后再次在Routes.tsx中

<Router history={history}> // here
<Switch>
<Route path="/" exact component={Home} />
<Route path="/Contact" component={Contact} />
</Switch>
</Router>

你必须放弃其中一个，它们可能相互冲突

更新

除此之外，我认为您不应该直接从导出中使用history对象，而是通过HOwithRouter访问它。然后，你可以包装

所以你应该做一些类似的事情

import React, { Component } from "react";
import { withRouter } from 'react-router-dom'
import "./Home.css";
class Home extends Component {
const { history } = this.props
render() {
return (
<div className="Home">
hello home
<button onClick={() => history.push('/Contact')} value='click here'>Get Started</button>
</div>
);
}
}
export default withRouter(Home)

我认为这里的问题是，您需要用withRouter()包装页面，如下所示：

import React, { Component } from "react";
import history from './../history';
import "./Home.css";
import { withRouter } from 'react-router-dom'; //<---------- add this
class Home extends Component {
render() {
return (
<div className="Home">
hello home
<button onClick={() => history.push('/Contact')} value='click here'>Get Started</button>
</div>
);
}
}
default export withRouter(Home); //<-------------- and add this

您也需要在Contact页面上执行同样的操作。

为什么有两个路由器？

我想你只需要在index.tsx或Routes.tsx 中删除路由器

根据你的文件命名，我会删除Routes.tsx 中的路由器

您似乎在使用history包进行导航。如果您使用的是react-router v5，那么您可能必须将history软件包降级为4.10.1，直到history软件包开发人员发布带有修复程序的新版本。截至本文撰写之时，history包的最新发布版本是v5.0.1，如果您看到比此版本更新的版本，您可以先试用该版本，看看它是否有效，然后再降级到4.10.1

问题链接->https://github.com/remix-run/history/issues/804

相关内容

最新更新

热门标签：