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 组件，如下所示：

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

这是 React Router v4 文档中的相关条目： https://reacttraining.com/react-router/web/api/Route/exact-bool