Question

我现在反应很新，我的react应用程序在每条路线上都有一个侧边栏。我想创建一个与该侧边栏分开的登录页面。我看了其他答案，但似乎找不到有效的解决方案。下面是我的index.js文件以及我尝试过的内容

const routing = (

    <Router>

      {/* <!-- Side navbar --> */}

      <div class="sidenav">
      <img src={ require('./Newlogo.png') } id='logo' />
        <div class="container nav_items">
          <div class="row">
            <Link to="/home">Home</Link>
          </div>
          <div class="row">
            <Link to="/secret">Secret</Link>
          </div>
          <div class="row">
            <Link to="/discover">Discover</Link>
          </div>
          <div class="row">
            <Link to="/create/recipe">Create Recipe</Link>
          </div>

          <div class="row">
            <Link to="/admin">Admin Tools</Link>
          </div>
          <div class="row">
            <Link onClick={logout}>Logout</Link>
          </div>
        </div>
      </div>


    {/* <!-- Page content --> */}

        <div class="main">
          <Route path="/landing" component={Landing} />      
          <Route path="/" component={App} />
          <Route path="/croptest" component={CropTest} />
          <Route path='/profile/:id' component={withAuth(Profile)}/>  
          <Route path="/home" component={withAuth(Home)} />
          <Route path="/secret" component={withAuth(Secret)} />
          <Route path="/register" component={Register} />
          <Route path="/login" component={Login} />

        </div>
    </Router>
  )

    ReactDOM.render(routing, document.getElementById('root'))

Answer 1

1）通过用<div/>包装两个<div className="row">来定义布局，如下所示。我认为取决于您如何准备布局

<div className="row">
    <div className="sidenav col-2">
...
    </div>
    <div className="main col-2">
...
    </div>
</div>

2）尝试使用 react-router-dom 代替 react-router

3）导入所需的参考

import {
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom";

4）用<Switch>

包裹所有路线

<Switch>
    <Route ... />
    <Route ... />
    <Route ... />
</Switch>

5）尝试在您的路线中使用 exact

<Route exact path="/" component={App} />

6）最后将所有 class 更改为 className ，因为 className 是反应标准

希望它能起作用

React Router，在某些路线中删除导航/边栏

1 个答案: