javascript - react js中的常见标题问题

Question

我对 react js 中的通用 header 有问题。
当前登录路由显示通用标题，我不想显示在我的登录页面上。如果我去联系人页面而不是它显示的通用标题，这是完美的

import "./styles/App.scss";
import Navbar from "./components/elements/Navbar";
import Contacts from "./components/contacts/Contacts";
import { Provider } from "react-redux";
import store from "./store";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import AddContact from "./components/contacts/AddContact";
import EditContact from "./components/contacts/EditContact";
import Login from "./components/login/Login";
import Logout from "./components/logout/Logout";


function App(props) {
  return (
    <Provider store={ store }>
      <Router>
        <div className="App">
        {props.location.pathname !== '/login' ? <Navbar/> : null}
          <Route exact path="/login" component={ Login } />
          <div className="container">
            <div className="py-3">
              <Switch>
                <Route exact path="/" component={ Contacts } />
                <Route exact path="/logout" component={ Logout } />
                <Route exact path="/contacts/add" component={ AddContact } />
                <Route
                  exact
                  path="/contacts/edit/:id"
                  component={ EditContact }
                />
              </Switch>
            </div>
          </div>
        </div>
      </Router>
    </Provider>
  );
}

export default App;


  [1]: /image/7V0qi.png

Answer 1

我想你是想创建 友情链接 在 NavBar ，不是 声明 路线:

<Router>
  <div className="App">
    <div className="container">
      <div className="py-3">
        <Switch>
          <Route exact path="/login" component={Login} />
          <Route>
            <Navbar />
            <Switch>
              <PrivateRoute exact path="/" component={Contacts} />
              <PrivateRoute exact path="/logout" component={Logout} />
              <PrivateRoute exact path="/contacts/add" component={AddContact} />
              <PrivateRoute
                exact
                path="/contacts/edit/:id"
                component={EditContact}
              />
            </Switch>
          </Route>
        </Switch>
      </div>
    </div>
  </div>
</Router>

导航栏:

function Navbar() {
  const someId = 123 // example
  return (
   <>
    <Link to="/">Login</Link>
    <Link to="/logout">Logout</Link>
    <Link to="/contacts/add">Add Contacts</Link>
    <Link to={`/contacts/edit/${someId}`}>Edit Contact</Link>
   </>

  )
}

在此之后，您很可能正在寻找身份验证。我最近在 authenticated or protected routes i.e. PrivateRoute 上写了一个答案.
另外，请注意 All children of a Switch should be Route or Redirect elements.