React - 主页数据被复制到其他页面

Question

我正在使用带有 Auth0 身份验证的 React(来自 Auth0 页面的代码(，我的问题是主页内容被复制到所有其他页面。我的 App 类中有一个导航栏，我想在所有页面上复制它(并且它被复制(，但添加到 App 类的任何其他内容也会被复制(我不想要(。我无法找到有关以这种方式使用 props 和身份验证进行路由的正确文档。任何帮助将不胜感激。

路线.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>
  );
}

应用.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} />} />

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