Ссылка на реакцию-роутер-дом не обновляет страницу

Question

Приведенный ниже код изменяет URL-адрес в строке поиска, но не перенаправляет и не отображает страницу автоматически.Для того, чтобы перейти на каждую страницу, я должен перейти непосредственно по ссылке, введя URL.Какие изменения мне нужно внести в структуру компонентов моего реагирующего маршрутизатора, чтобы перенаправление и рендеринг работали?Приветствуются любые предложения.

Приложение:

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

Src Index.js:

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

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

Nav:

    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

Я заменил все теги 'Link' на теги 'a' в компоненте Nav, и теперь он работает.Я полагаю, что каждый элемент «Связь» по реакции-маршрутизатору переопределял «Маршрут» по реакции-маршрутизатора-домена, поэтому он просто менял URL-адрес, но фактически не выполнял повторный рендеринг.Теперь теги 'a' запускают 'Маршрут', поэтому теперь происходит повторный рендеринг.

Вот обновленный код со страницы 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>
    );
  }
};