保持路由交换机上的导航栏

Question

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

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

每当我点击“食谱”链接时，它应该重定向到路线“/ recipes”。 但是，当我使用/* a linked list node */ typedef struct { int data; node *next; } node; /* represent a linked list as a pointer to the first node */ typedef node *list; /* create a list by building first node */ list mklist(int firstData) { node *n = malloc(sizeof(node)); n->data = firstData; n->next = NULL; /* the last node of the list always has next as NULL */ } /* obtain a pointer to the tail node of a linked list */ node *getLast(list l) { node *cur = l; while (cur->next != NULL) cur = cur->next; return cur; } /* add to the end of the linked list */ void append(list l, int newNodeData) { node *last = getLast(l); last->next = malloc(sizeof(node)); /* last->next represents our new node. We set its data to newNodeData, and since it is the last node, its next member is NULL */ last->next->data = newNodeData; last->next->next = NULL; } 实现路由时，它只会呈现Recipes组件中实际返回的内容。我知道这反应是正确的。 现在，我想保留导航栏但只想交换下面的组件，所以我想改变导航栏下方的内容，就像我在App.js中所做的那样。

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

可以找到整个代码here。

Answer 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>
);

Answer 2

我同意Jyutzio的意见，您需要将导航组件移动到子路由上方，才能更改为子路由的内容。

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

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

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

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

Header = connect(mapStateToProps)(Header);

export default Header;

然后，这允许我检查＆＃34;经过验证的＆＃34;一块状态并相应地渲染。

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

您需要设置减速器，但有许多资源可以解释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>

admin_router：

<div>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/details" component={AdminDetails} />
    <Route component={PageNotFound} />
  </Switch>
</div>