React Router 仅在刷新页面后才起作用

Question

我对反应有点陌生，我遇到了路由器的问题。 当我直接在浏览器上输入 URL 时，路由有效，但是当我单击链接时，浏览器上的 URL 会发生变化（例如 Z80791B3AE7002CB88C246876D9FAAcontactus8F8Z：如果我刷新，它会更新）。

这是我的 github 回购： https://github.com/Arefaat18/Project

这是我的 MainComponent.js

import React, { Component } from 'react';
import {TransitionGroup, CSSTransition} from 'react-transition-group';
import {Switch, Route, Redirect,withRouter,BrowserRouter as Router} from 'react-router-dom';
import Header from './HeaderComponent';
import ContactUs from './ContactUsComponent';
import AboutUs from './AboutUsComponent';
import Home from './HomeComponent.js';
import {connect} from 'react-redux';  

class Main extends Component {

  constructor(props) {
    super(props);

  }

  
  
  render() {

    return (
      <div>
        <Router>
        <Header />
        <TransitionGroup>
          <CSSTransition classNames="page" timeout={300}>
            <Switch>
              <Route path="/home" component={Home} />
              <Route exact path = "/contactus" component ={ContactUs} />
              <Route exact path = "/aboutus" component ={AboutUs} />
              <Redirect to="/home" />
            </Switch>
          </CSSTransition>
        </TransitionGroup>
        </Router>
        </div>
    );
  }
}

export default withRouter(Main);

这是我的 App.js 文件

import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
import {BrowserRouter} from 'react-router-dom';
import {Provider} from 'react-redux';
import {ConfigureStore} from './components/configureStore';

const store = ConfigureStore();

class App extends Component {


  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <div className="App">
            <Main />
          </div>
        </BrowserRouter>
      </Provider>
    );
  }
}

export default App;

这是相关的依赖项

"react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.1",
    "react-redux-form": "^1.16.14",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.4",

这是我的 ContactUsComponent，其他的组件都是一样的，只是文字不同

import React, { Component } from 'react';

class ContactUs extends Component {

    render(){
        console.log("RENDER");
        return (
            <div>
                <h1> Contact Us</h1>
            </div>
        );
    }
}

export default ContactUs;

提前致谢。

Answer 1

是的，您已经声明了无关的Router ，您的标头组件有一个。 删除此Router 。

这是因为每个Router提供一个路由上下文，而每个组件订阅到路由上下文会从最近的路由器的上下文。 向标头提供上下文的路由器没有呈现任何路由，因此这就是 URL 会更改的原因，但实际上呈现Route的路由器并未被通知它应该呈现不同的路径。

class Header extends Component {
  constructor(props) {
    ...
  }

  ...

  render() {
    return (
      <React.Fragment>
        {/* <Router> */} // <-- Remove this Router Component
        <Navbar dark expand="md">
          ...
        </Navbar>
        <Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
          ...
        </Modal>
        {/* </Router> */}
      </React.Fragment>
    );
  }
}

Answer 2

我遇到了类似的问题。 我在组件中使用了Link ，但我从@reach/router导入了它。 结果我换了

import { Link } from "@reach/router"

和

import { Link } from "react-router-dom"

在每个组件中； 一切正常

Answer 3

我刚刚完成了使用 React 进行前端 Web 开发课程。 我认为您也在学习这门课程，所以我认为您的代码没有任何问题，可能问题出在您的 ContactUs 组件中。 如果您可以提供您的 ContactUs 代码，那么我可以调试它

Answer 4

我也遇到了同样的问题，但我必须在index.js文件中用BrowseRouter包装我的App.js

import {BrowserRouter as Router} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <App />
  </Router>
);

Answer 5

好吧，我也遇到了同样的问题，但在 react 18 中，我们在 index.js 文件中的组件默认包装在 react 严格模式下

像这样：

<React.StrictMode>
<App/>
</React.StrictMode>

我删除了 React 严格模式标签，然后它对我来说非常好用