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

Question

I've been working on a react single page app and have been trying to get the routing to work.

I believe the routing itself actually works however the page does not load the correct content unless the page is manually reloaded. Back and forward browser arrows also work.

For example I can navigate to localhost:3000 fine and the content is loaded correctly but when I press a button to navigate to localhost:3000/contacts nothing is displayed unless I refresh the page. Once manually refreshed the contacts page shows up. What gives?

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

history.tsx

import { createBrowserHistory as history} from 'history';

export default history();

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

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

Any help greatly appreciated

Answer 1

I think there's some extra code that might be causing conflict. You're defining the Router from react-router-dom twice:

Once here, in index.tsx

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

and then again in Routes.tsx

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

You have to drop one of them, they're probably conflicting each other

Update

In addition to that, I think you should not use the history object directly from your export, but access it through the HOC withRouter . Then, you'd wrap

So you'd do something like this

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)

Answer 2

I think the issue here is that you need to wrap your pages with withRouter() like so:

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

You will need to do the same on your Contact page as well.

Answer 3

Why do you have two routers?

I guess you simply need to remove the Router either in index.tsx or in Routes.tsx

According to you file naming I would remove the Router in Routes.tsx

Answer 4

It seems like you are using the history package for navigation. If you are using the react-router v5 , then you may have to downgrade the history package to 4.10.1 until the history package developers issue a new release with the fix. As of writing this, the latest release version of history package is v5.0.1 , and if you see a new release than this, you can try with that version first to see if it works, before doing the downgrade to 4.10.1

Issue Link -> https://github.com/remix-run/history/issues/804