react-router-dom link doesnt update page

Question

The code I have in place below changes the URL in the search bar but does not redirect and render the page automatically. In order to navigate to each page I have to go directly to the link by entering the URL. What change do I need to make to the structure of my react router components to get the redirect and render to work? Any suggestions are welcomed.

App:

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

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

Router:

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

J.Katz J.Katz · Accepted Answer · 2018-12-20T20:55:04

I replaced all 'Link' tags with 'a' tags in the Nav component and it now works. I believe each react-router-dom 'Link' was overriding the react-router-dom 'Route' so it was just changing the URL but not actually re-rendering. Now the 'a' tags trigger the 'Route' so a re-render now occurs.

Here is the updated code from the Nav page:

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-router-dom link doesnt update page

1 Answers