リアクタールータリンクまたはブラウザ履歴.pushアドレスバーのurlを変更しますが、URLに動的パラメータを含むページからリダイレクトしません

Question

リアサイトのリンクがあるサイドバーがあります。このボタンの目的は、ログインしたユーザーを/ user /：のようなURLでプロファイルページにリダイレクトすることです。user_id

ほとんどの場合、問題はなくロジックを定義しました。ここのように、それがどのように見えるかです：それは私のルータである

export class SideBar extends React.Component { 
    // ... some omitted code here ... 
    getProfileUrlString() { 
     /* Function for 'to' attribute of profile Link button in the sidebar. 
     * Returns user's profile URL if he's logged in, 
     * otherwise redirects him to the /login page 
     */ 
     if (localStorage['token']) { 
      return `/user/${localStorage['id']}/` 
     } else { 
      return '/login' 
     } 
    } 

    render() { 
     return (
     <div id="sidebar-wrapper" role="navigation"> 
      <ul className="sidebar-nav"> 
       <li><Link onlyActiveOnIndex activeStyle={{color: "#53acff"}} 
        to="/">Home</Link></li> 
       <li><Link onlyActiveOnIndex activeStyle={{color: "#53acff"}} 
        to={this.getProfileUrlString()}>Profile</Link></li> 
       {this.renderSignOutBtn()} 
      </ul> 
     </div> 
    ); 
    } 
} 

：私が訪れたとき

ReactDOM.render(
    (<Router history = {browserHistory}> 
     <Route path = "/" component = {APP}> 
     <IndexRoute component = {Home} /> 
     <Route path = "home" component = {Home}/> 
     <Route path = "/login" component = {LoginComponent} /> 
     <Route path = "/registration" component = {RegistrationComponent} /> 
     <Route path = "/user/:user_id" component = {Profile} /> 
     </Route> 
    </Router>), 
    document.getElementById('app')); 

のは、私はアカウントを持っているし、idが102そう鉱山プロフィールページであると言ってみましょう/user/102

でご利用いただけます'/'や '/ login'のような非動的URLを入力してから、NavbarのProfile Linkをクリックすると完全に動作します。それは私のプロフィールに正常にリダイレクトされます。しかし、私は/ user/5のようなURLで他のユーザーのページを訪問し、何も起こらないようにプロファイルのリンクをクリックします！ 1つの変わったことを除いて：アドレスバーのURLは/ user/5から/ user/102に変更されます。しかし、プロフィールのコンポーネントは再レンダリングされず、ユーザー番号5のすべてのデータが私の前にあります。

onClickイベントのロジックをいくつか再定義し、browserHistory.pushリダイレクトを割り当てようとしましたが、同じ問題もあります。私は同じ結果でthis.history.pushも試しました。

同様の動的パラメータを持つ類似のページのURLに動的IDを持つページにリダイレクトするにはどうすればよいですか？

が反応：15.3.2

反応-ルータ：2.8.1

Answer 1

あなたのroutes.jsで認証チェックを取り扱う試してみてください。このようにして、ルートのonEnter小道具を設定することによって、コンポーネントの外でこのチェックを行うことができます。すべての認証チェックは1か所で処理できます。パス内に:user_idも必要ありません。

// Routes.js 

function requireLogin() { 
    if (!localStorage['token']) { 
    browserHistory.push('/login'); 
    } 
}; 

<Route path="/user" component={Profile} onEnter={requireLogin} /> 

は、その後、あなたのSideBarコンポーネントで、ちょうど/userにすべての時間をリダイレクトします。

<li> 
    <Link onlyActiveOnIndex activeStyle={{color: "#53acff"}} to="/user">Profile</Link> 
</li> 

は、その後、あなたの Profileコンポーネントで、あなたの componentDidMount()機能で localStorage['id']を用いてユーザデータをロードします。