0

我的反应组件有问题。基本上我的界面应该是一个使用 ReactJS 构建的 SPA。

在使用auth0-js实现身份验证期间，我还实现了一些路由。布局如下所示：

布局

每当我现在单击“食谱”链接时，它应该重定向到路线“/食谱”。但是，当我使用它实现路由时，<Route path="/recipes" component={Recipes} />它只会呈现Recipes 组件中实际返回的内容。我知道从 react 的作用来看这是正确的。现在，我想保留导航栏但只想交换下面的组件，所以我想像在App.js中一样更改导航栏下方的内容。

我怎样才能做到这一点？路线或组件是否不正确？我不想总是重新渲染一切。我也想保持整个页面的风格。有没有办法做到这一点？

整个代码可以在这里找到。

4

2 回答 2

0

我同意 Jyutzio 的观点，因为您需要将 Navigation 组件移动到子路由上方，以便仅更改子路由的内容。

为了让导航栏更新登录/注销状态，您可能需要考虑实现 redux。我有一个项目的要求几乎和你的一样——一个静态的导航标题。

在我的标题中，我有import { connect } from 'react-redux';

在导出之前我使用的组件底部：

function mapStateToProps(state) {
  return { authenticated: state.auth.authenticated };
}

Header = connect(mapStateToProps)(Header);

export default Header;

然后这使我可以检查“经过身份验证”的状态并相应地进行渲染。

renderLogoutButton() {
  if(this.props.authenticated) {
    return(
      <li><a onClick={...}>Logout</a></li>
    );
  } else {
    return(
      <li><a onClick={...}>Login</a></li>
    );
  }
}

你需要设置一个 reducer，但是有很多资源可以解释 redux 设置。

我设置的路由器（简化）如下：

import Admin from './index';
...
<BrowserRouter>
  <Switch>
    <Route exact path="/login" component={Login} />
    <Route path="/" component={Admin} />
  </Switch>
</BrowserRouter>

指数：

import AdminRouter from './admin/admin_router';
...
<div>
  <Menu />
  <div>
    <AdminRouter />
  </div>
</div>

管理员路由器：

<div>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/details" component={AdminDetails} />
    <Route component={PageNotFound} />
  </Switch>
</div>
于 2018-02-12T00:53:26.717 回答
-1

如果您将导航组件放在开关上方，它将解决您的问题。

const Routes = () => (
  <Router history={history} component={Home}>
    <Route component={Navigation}/>
    <Switch>
      <Route exact path="/" render={props => <Home auth={auth} {...props} />} />
      <Route path="/home" render={props => <Home auth={auth} {...props} />} />
      <Route
        path="/callback"
        render={props => {
          handleAuthentication(props);
          return <Callback {...props} />;
        }}
      />
      <Route component={NotFound} />
    </Switch>
  </Router>
);
于 2018-02-11T16:50:01.047 回答