Question

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

应用程序：

#thread;;

路由器：

<mat-sidenav-container class="map-bar-container">
    <mat-sidenav #sidenav mode="side" opened class="nav">
        <app-sidenav></app-sidenav>
    </mat-sidenav>

    <mat-sidenav-content class="cmap">
        <app-map></app-map>
    </mat-sidenav-content>
</mat-sidenav-container>

Src Index.js：

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

Answer 1

我在Nav组件中将所有“链接”标签替换为“ a”标签，现在可以使用了。我相信每个react-router-dom'Link'都覆盖了react-router-dom'Route'，因此它只是更改URL，而实际上没有重新呈现。现在，“ a”标签会触发“路线”，因此会进行重新渲染。

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

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链接不会更新页面

1 个答案: