Javascript React应用程序路由不'；除非重新加载页面，否则不能加载内容

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

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

例如，我可以导航到

localhost:3000

很好，并且内容加载正确，但是当我按下按钮导航到

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()

Home/Home.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>
        );
    }
}

import React，{Component}来自“React”；
从“/../history”导入历史记录；
导入“/Home.css”；
导出默认类Home extends组件{
render（）{
返回(
你好，家
history.push（'/Contact'）}value='click here'>开始
);
}
}

Contact/Contact.tsx

import React, { Component } from 'react';

class Contact extends Component {
    render() {
        return (
            <div>
              hello world
            </div>
        );
    }
}

export default Contact;

import React，{Component}来自'React'；
类接触扩展组件{
render（）{
返回(
你好，世界
);
}
}
导出默认联系人；

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>
        )
    }
}

import React，{Component}来自“React”；
从“react Router dom”导入{BrowserRouter，Router，Switch，Route}；
从“/Contact/Contact”导入联系人；
从“/Home/Home”导入主页
从“/历史记录”导入历史记录
导出默认类路由扩展组件{
render（）{
返回(
)
}
}

---

非常感谢您提供的任何帮助

我认为这里的问题是您需要使用

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

import React，{Component}来自“React”；
从“/../history”导入历史记录；
导入“/Home.css”；
从“react router dom”导入{withRouter}//开始
);
}
}
默认使用路由器导出（主）// 我认为有一些额外的代码可能会导致冲突。您从
react Router dom
定义路由器两次：

在此之后，在
index.tsx中

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

ReactDOM.render(
//这里
，document.getElementById（'root'））
)

然后再次在
Routes.tsx中

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

为什么你们有两个路由器

我想您只需要在index.tsx或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>
        )
    }
}

根据您的文件命名，我将删除Routes中的路由器。tsx
我遵循了本个人教程，我并不是100%了解我的错误所在。除了可能使用typescript而不是简单的Javascript，所以我可以将
history={history}
部分移动到index.tsx文件中，并删除Routes.tsx中的路由器标记，但我仍然得到相同的结果是的，听起来不对，您只需要一个路由器。关于错误的其余部分，也许您应该使用路由器从HOC
中检索历史记录，而不是导入您正在导出的历史记录。类似于，但现在您的道具中将提供
历史
；作为
this.history.props
我将Home类更改为函数，并删除了
扩展组件
位，因为这似乎是添加变量的唯一方法。我无法让
const{history}=this.props
在没有抛出“；”的情况下工作预期错误。TL；博士，我让它起作用了，但我一辈子都搞不明白为什么它现在起作用了。它一定是在express
server.js
文件中出错了。如果我弄明白了，我会更新一个答案。
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>
        )
    }
}