React - 主頁數據被複制到其他頁面

我正在使用React和Auth0身份驗證（來自Auth0頁面的代碼），我的問題是主頁內容被複制到所有其他頁面。我在我的App類中有一個導航欄，我想在所有頁面中複製它（並且它被複制），但添加到App類的任何其他內容也會被複制（我不想）。我一直無法找到有關以這種方式使用道具和認證進行路由的正確文檔。任何幫助，將不勝感激。React - 主頁數據被複制到其他頁面

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;

來源

2017-06-28 Juggy

嘗試傳遞exact屬性到你的/ home路由組件，如下所示：

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

這裏是在相關入口中的陣營路由器v4的文檔： https://reacttraining.com/react-router/web/api/Route/exact-bool

來源

2017-06-28 22:26:22

這並不工作，但加'exact'爲'<路由路徑=「/」 ......'似乎是一個很好的一步。來自App.js的內容突然不會像我想要的那樣複製到所有頁面。這也意味着其他頁面中沒有導航欄。將'

如果您的應用程序組件所包含的唯一的事情是導航欄，不應該有需要將其包裝在路由組件 - 嘗試用這種替代路線： '<應用AUTH = {授權} {...道具}歷史= {}歷史/>' 如果不能解決問題，嘗試簡單的'import'從它的定義文件-ing你的'history'。 –

另外，我不認爲'BrowserRouter'組件接受了'成分'支柱 - 移除那也不應該有任何傷害。 –

React - 主頁數據被複制到其他頁面

回答

相關問題