react-router-dom 链接不更新页面

Question

我在下面的代码更改了搜索栏中的 URL，但不会自动重定向和呈现页面。为了导航到每个页面，我必须通过输入 URL 直接进入链接。我需要对我的 react 路由器组件的结构进行哪些更改才能使重定向和渲染正常工作？欢迎提出任何建议。

应用：

class App extends React.Component {
  render () {
    return (
      <div>
        <Nav/>
        <Router/>
        <Footer/>
      </div>
    );
  };
};

export default withRouter(connect(null, actions)(App));

路由器：

class Router extends React.Component { 
  render () {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={Login}/>
          <Route path="/about" component={About}/>
          <Route path="/competitionsubmissions" component={CompetitionSubmissionApp} onEnter={requireLogin}/>
          <Route path="/competition" component={CompetitionApp}/>
          <Route path="/account" component={Account}/>
          <Route path="/account/favorites" component={FavoritesApp} onEnter={requireLogin}/>
          <Route path="/confirmation" component={ConfirmationApp} onEnter={requireLogin}/>
          <Route path="/payment" component={PaymentApp} onEnter={requireLogin}/>
          <Route path="/artfeedpostings" component={ArtFeedApp}/>
          <Route path="/postings" component={PostingsApp}/>
          <Route path="/chatMessages" component={ChatApp} onEnter={requireLogin}/>
          <Route path="/accountsettings" component={AccountSettings} onEnter={requireLogin}/>
        </Switch>
      </div>
    )
  }
}

function mapStateToProps({ auth }) {
  return { auth };
}

export default connect(mapStateToProps)(Router);

源索引.js：

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </Provider>,
  document.getElementById('app')
);

export default connect(
  (state) => {
    return state;
  }
)();

导航：

    class Nav extends React.Component {
    return (
      <div className="top-bar">
        <div className="top-bar-left">
          <ul className="menu">
            <li className="menu-text">Art App</li>
            <li>
              <Link to="/postings">Get Postings</Link>
            </li>
            <li>
              <Link to="/artfeedpostings">Art Feed</Link>
            </li>
            <li>
              <Link to="/competition">Competition Page</Link>
            </li>
          </ul>
        </div>
        <div className="top-bar-center">
            <ul className="menu">
              <li className="text-center">
                {userName}
              </li>
            </ul>
        </div>
        <div className="top-bar-right">
            <ul className="menu">
              {this.loggedIn()}
            </ul>
        </div>
      </div>
    );
  }
};

function mapStateToProps({ auth }) {
  return { auth };
}

export default withRouter(connect(mapStateToProps, actions)(Nav));

Answer 1

我将导航组件中的所有“链接”标签替换为“a”标签，现在它可以工作了。我相信每个 react-router-dom 'Link' 都覆盖了 react-router-dom 'Route'，所以它只是更改了 URL，但实际上并没有重新渲染。现在“a”标签触发了“Route”，所以现在会发生重新渲染。

这是来自导航页面的更新代码：

class Nav extends React.Component {
  handleClick = () => {
    this.props.history.push('/account');
  }

  loggedIn () {
    switch (this.props.auth) {
      case null:
        return;
      case false:
        return <li><a href="/">Login</a></li>;
      case "":
        return <li><a href="/">Login</a></li>;
      default:
        return [
          <li key="1">
            {/* <Link to="/chatMessages">Chat</Link> */}
            <a href="/chatMessages">Chat</a>
          </li>,
          <li key="2">
            {/* <Link to="/confirmation">Cart</Link> */}
            <a href="/confirmation">Cart</a>
          </li>,
          <li key="3">
            {/* <Link to="/account" onClick={this.handleClick}>Account</Link> */}
            <a href="/account" onClick={this.handleClick}>Account</a>
          </li>,
          <li key="4">
            <a onClick={this.onLogout} href="/api/logout">Logout</a>
          </li>
        ]
    }
  }

  onLogout = () => {
    this.props.startLogout();
    this.props.logout();
  }

  render () {
    var {userName} = this.props;

    return (
      <div className="top-bar">
        <div className="top-bar-left">
          <ul className="menu">
            <li className="menu-text">Art App</li>
            <li>
              {/* <Link to="/postings">Get Postings</Link> */}
              <a href="/postings">Postings</a>
            </li>
            <li>
              {/* <Link to="/artfeedpostings">Art Feed</Link> */}
              <a href="/artfeedpostings">Art Feed</a>
            </li>
            <li>
              {/* <Link to="/competition">Competition Page</Link> */}
              <a href="/competition">Competitions</a>
            </li>
          </ul>
        </div>
        <div className="top-bar-center">
            <ul className="menu">
              <li className="text-center">
                {userName}
              </li>
            </ul>
        </div>
        <div className="top-bar-right">
            <ul className="menu">
              {this.loggedIn()}
            </ul>
        </div>
      </div>
    );
  }
};