Question

我有点不适应，并且遇到路由器问题。当我直接在浏览器上输入URL时，路由有效，但是当我单击链接时，URL在浏览器上发生了变化（例如http：// localhost：8080 / contactus），但是内容没有更新（但是如果我刷新，它会更新）。

这是我的github仓库： here

这是我的MainComponent.js

app.delete("/api/note/:id", function(req,res){
const delNote = req.params.id;
const delArr = [];
fs.readFile("./db/noteList.json", "utf8",function(err,data){
    if(err) throw err;
    const noteList = JSON.parse(data);
    for(let i=0;i<noteList.length;i++){
        if(noteList[i].title==delNote){
            delete noteList[i].title;
            delete noteList[i].date;
            delete noteList[i].notes;
        }
        else{
            delArr.push(noteList[i]);
        }
    }
    fs.writeFile("./db/noteList.json",JSON.stringify(delArr),function(err){
        if(err) throw err;
        console.log("Added");
        res.status(200);
        res.write('Success');
    });
    
});

这是我的App.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);

这是相关的依存关系

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;

这是我的ContactUsComponent，其他组件只是相同，只是文字不同

"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",

谢谢。

Answer 1

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

这是因为每个Router提供了一个路由上下文，并且每个订阅 a 路由上下文的组件都从最近的路由器获得了上下文。为标头提供上下文的路由器未呈现任何路由，因此这就是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

我刚刚完成了React的前端Web开发课程。我认为您也在学习本课程，因此我认为您的代码没有任何问题，可能问题出在ContactUs组件内部。如果您可以提供ContactUs代码，那么我可以对其进行调试

只有刷新页面后，React Router才能工作

2 个答案: