React - ホームページデータが他のページにコピーされる

Question

私はAuth0認証でReact（Auth0ページのコード）を使用していますが、私の問題はホームページの内容が他のすべてのページにコピーされていることです。私はすべてのページにコピーされる（そしてコピーされる）私のAppクラス内のナビゲーションバーを持っていますが、Appクラスに追加された他のコンテンツもコピーされます（私は望みません）。私は、このような方法で小道具と認証のルーティングに関する適切な文書を見つけることができませんでした。どんな助けもありがとう。

Routes.js

const auth = new Auth(); 

const handleAuthentication = (nextState, replace) => { 
    if (/access_token|id_token|error/.test(nextState.location.hash)) { 
    auth.handleAuthentication(); 
    } 
} 

export const makeMainRoutes =() => { 
    return (
    <BrowserRouter history={history} component={App}> 
     <div> 
      <Route path="/" render={(props) => <App auth={auth} {...props} />} /> 
      <Route path="/home" render={(props) => <Home auth={auth} {...props} />} /> 
      <Route path="/profile" render={(props) => (
      !auth.isAuthenticated() ? (
       <Redirect to="/home"/> 
      ) : (
       <Profile auth={auth} {...props} /> 
      ) 
     )} /> 
      <Route path="/ping" render={(props) => (
      !auth.isAuthenticated() ? (
       <Redirect to="/home"/> 
      ) : (
       <Ping auth={auth} {...props} /> 
      ) 
     )} /> 
      <Route path="/callback" render={(props) => { 
      handleAuthentication(props); 
      return <Callback {...props} /> 
      }}/>   
     </div> 
     </BrowserRouter> 
); 
} 

App.js

class App extends Component { 
    goTo(route) { 
    this.props.history.replace(`/${route}`) 
    } 

    login() { 
    this.props.auth.login(); 
    } 

    logout() { 
    this.props.auth.logout(); 
    } 

    render() { 
    const { isAuthenticated } = this.props.auth; 

    return (
     <div> 
      <nav> 
       <div className="container nav-wrapper"> 
        <a href="" onClick={this.goTo.bind(this, '')} className="brand-logo"><i className="material-icons">done_all</i> Rate IT</a> 
        <ul id="nav-mobile" className="right hide-on-med-and-down"> 
         <li><a onClick={this.goTo.bind(this, 'home')}>Home</a></li> 
         { 
          !isAuthenticated() && (
           <li><a onClick={this.login.bind(this)}>Log In</a></li> 
          ) 
         } 
         { 
          isAuthenticated() && (
           <li><a onClick={this.logout.bind(this)}>Log Out</a></li> 
          ) 
         } 
        </ul> 
       </div> 
      </nav> 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

次のように、exactがあなたの/ homeのルート要素に属性を渡して試してみてください。

<Route exact path="/home" render={(props) => <Home auth={auth} {...props} />} />

はここで関連エントリのルーターv4のドキュメントに反応：動作しませんが、追加 `exact`は` <ルート・パス=「/」... `良好なステップのように思えるし https://reacttraining.com/react-router/web/api/Route/exact-bool