Question

我们正在尝试使用React-redux创建一个简单的网站。我们计划有一个侧边栏，如下所示。单击“ / addcourses”链接时，URL会更改，但不会呈现新组件。如果刷新页面，它将正确呈现。我读了几篇博客，说不要使用Purecomponents。我们没有使用它们。一个博客建议“ https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md”建议传递位置。不太清楚该怎么做。任何帮助将不胜感激。非常感谢。这是我的sidebar.jsx：

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class Sidebar extends Component {



 state = {};
 render() {
    return (
      <Router>
        <div style={{ display: "flex" }}>
          <div
            style={{
              padding: "10px",
              width: "40%",
              background: "#f0f0f0"
            }}
          >
            <ul style={{ listStyleType: "none", padding: 0 }}>
              <li>
                <Link to="/dashboard">Home</Link>
              </li>
              <li>
                <Link to="/addcourses">Courses</Link>
              </li>
              <li>
                <Link to="/payment">Payment</Link>
              </li>
            </ul>
          </div>
        </div>
      </Router>
    );
  }
}

export default Sidebar;

在我的App.js中，我正在执行以下操作：

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Navbar />
            <Route exact path="/" component={LandingPage} />
            {/* <div className="container-fluid"> */}
            <React.Fragment>
              <Route exact path="/verify" component={EmailVerification} />
              <Route exact path="/register" component={Register} />
              <Route exact path="/login" component={Login} />
              <Switch>
                <PrivateRoute exact path="/dashboard" component={Dashboard} />
              </Switch>
              <Switch>
                <PrivateRoute
                  exact
                  path="/addcourses"
                  component={AddSwapDeleteWrapper}
                />
              </Switch>
              <Switch>
                <PrivateRoute
                  exact
                  path="/payment"
                  component={Payment}
                />
              </Switch>
              {/* </div> */}
            </React.Fragment>
            <Footer />
          </div>
        </Router>
      </Provider>
    );
  }
}

export default App;

Answer 1

如果单击<Link>，则事件将发送到封闭的<Router>，它将触发状态更新，并且链接指向的<Route>会显示。如果添加两个<Router>，则内部事件将处理该事件，而外部事件将不会更新。因此，请移除内部Router以使其正常工作。

链接到更改的URL，但未呈现组件

1 个答案: