Question

我正在使用React进行Auth0身份验证（来自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

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

1 个答案: