Reactjs react路由器dom链接不更新页面

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

应用程序：

类应用程序扩展了React.Component{
渲染（）{
返回(
);
};
};
使用路由器导出默认值（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);

类路由器扩展React.Component{
渲染（）{
返回(
)
}
}
函数MapStateTops（{auth}）{
返回{auth}；
}
导出默认连接（MapStateTops）（路由器）；

Src Index.js：

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

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

ReactDOM.render(
,
document.getElementById（'app'）
);
导出默认连接(
（州）=>{
返回状态；
}
)();

导航：

类导航扩展了React.Component{
返回(

艺术应用程序

发帖


艺术素材


比赛页面




{userName}



{this.loggedIn（）}

);
}
};
函数MapStateTops（{auth}）{
返回{auth}；
}
使用路由器导出默认值（connect（mapStateToProps，actions）（Nav））；

我将导航组件中的所有“链接”标记替换为“a”标记，现在它可以工作了。我相信每个react-router dom“链接”都覆盖了react-router dom“路由”，因此它只是更改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>
    );
  }
};

类导航扩展了React.Component{
handleClick=（）=>{
this.props.history.push（'/account'）；
}
loggedIn（）{
开关（this.props.auth）{
大小写为空：
返回；
案例错误：
返回
；
案例“”：
返回
；
违约：
返回[

{/*聊天*/}
，

{/*购物车*/}
，

{/*帐户*/}
，


]
}
}
onLogout=（）=>{
this.props.startogout（）；
this.props.logout（）；
}
渲染（）{
var{userName}=this.props；
返回(

艺术应用程序

{/*获取帖子*/}


{/*艺术提要*/}


{/*竞赛页面*/}




{userName}



{this.loggedIn（）}

);
}
};

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

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