如何在React Router v4中進行布局

Question

我已經進行了大量谷歌搜索，但無法解決我遇到的問題...

我正在建立一個社交網絡個人資料頁面，上面有不同的部分。 我希望核心個人資料信息始終可見，但是單擊某些鏈接（例如“照片”）以更改其他組件。

這是我的代碼：

App.js（路線）

class App extends React.Component {
  [ ... ]

  render() {
    return (
      <Router>

          <Navigation {...props} />
          <Switch>
            <Route exact path="/u/:id" component={Profile} />
            <Route component={NotFound} />
          </Switch>
          <Footer />
      </Router>
    );
  }
}

配置文件組件（根據用戶帳戶類型更改呈現的內容）：

const renderProfile = (user, id, type) => {
  if (type === 'artist') {
    return <Route render={() => <ArtistProfilePage id={id} />} />;
  } else {
    [ ... ]
  }
};

const Profile = ({ loading, user, id, type }) => (<div>
  { !loading && renderProfile(user, id, type) }
</div>);

ArtistProfilePage（這是我要始終顯示某些組件但如果URL更改則加載不同組件的頁面：

class ArtistProfilePageNew extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="ArtistProfilePage">
        <ArtistInfo />

        <Link to="/">Artist Media</Link>

        <Link to="lineup">Line-up</Link>

        <Link to="gigs">Gigs</Link>

        <Switch>
          <Route path="/" render={() => <ArtistMedia />} /> // this works
          <Route path="/lineup" render={() => <ArtistLineup />} /> // this doesn't
        </Switch>
      </div>
    );
  }
}

我想要實現的是，當url為u/:id且用戶類型為'artist'時，顯示ArtistProfilePage組件。 這工作

默認情況下，我希望ArtistProfilePage呈現<ArtistMedia />組件，該組件也可以正常工作

我的問題是，當用戶點擊鏈接的lineup ，因此URL變為u/:id/lineup ，應用程序顯示了404頁，而不是渲染<ArtistLineup />下部分<ArtistInfo />和鏈接。

我究竟做錯了什么？ 謝謝

Answer 1

在ArtistProfilePageNew中創建路由/ lineup時，需要在其之前附加上一個URL。 因此，您的組件將變為：

class ArtistProfilePageNew extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { match } = this.props;
    return (
      <div className="ArtistProfilePage">
        <ArtistInfo />

        <Link to={`${match.url}/`}>Artist Media</Link>

        <Link to={`${match.url}/lineup`}>Line-up</Link>

        <Link to={`${match.url}/gigs`}>Gigs</Link>

        <Switch>
          <Route path={`${match.url}/`} component={ArtistMedia} />
          <Route path={`${match.url}/lineup`} component={ArtistLineup} />
        </Switch>
      </div>
    );
  }
}

另外，我會將您的個人資料組件更改為此：

const renderProfile = (user, id, type, match) => {
  if (type === 'artist') {
    return <ArtistProfilePage id={id} match={match} />;
  } else {
    [ ... ]
  }
};

const Profile = ({ loading, user, id, type, match }) => (<div>
  { !loading && renderProfile(user, id, type, match) }
</div>);

由於Profile組件是通過Route渲染的，因此它應該自動獲取注入的match參數。 如果沒有，那么您需要使用react-router包中的withRouter包裝您的ArtistProfilePageNew。

我的解決方案未經測試，但是應該可以使您了解問題所在。

希望能幫助到你！

編輯：您需要從父路由中刪除確切的參數，因此您的應用將變為：

class App extends React.Component {

  render() {
    return (
      <Router>

          <Navigation {...props} />
          <Switch>
            <Route path="/u/:id" component={Profile} />
            <Route component={NotFound} />
          </Switch>
          <Footer />
      </Router>
    );
  }
}

CodePen上的Wokring示例： https ：//codepen.io/anon/pen/eeMMBd