Question

我正在创建一个带有侧面导航和标题栏的工作区。但是，如果用户未登录，我想将他们定向到登录页面。

主要成分如下

class App extends Component {
    render() {
        return (
          <Provider store={store}>
              <Router history={history}>
                  <div>
                      <Route exact path="/login" component={Login}/>
                      <Route exact path="/" component={Reporter}/>
                  </div>
              </Router>
          </Provider>   
        );
      }
    }

export default App;

Reporter组件如下所示：

class Reporter extends Component {
    render() {
        return (
            <Router history={history}>
                  <div className="reporter-container">
                      <SideNav/> 
                      <Switch>
                            <Route exact path="/reporter" component={WorkArea}/>
                            <Route exact path="/reporter/page1" component={Page1}/>
                            <Route exact path="/reporter/page2" component={Page2}/>
                            <Route exact path="/" component={WorkArea}/>
                      </Switch>    
                  </div>
             </Router>  
        );
      }
    }

export default Reporter;

在两个示例中，我都包含了react-router-dom和历史记录：

import { Switch, Route, Router } from 'react-router-dom'
import history from '../utils/history'

SideNav看起来像这样：

class SideNav extends Component {

    render() {
        return (
            <div className="side-nav">
                <div className="side-nav-item">
                    <i className="fas fa-file side-nav-icon"></i><Link to="/reporter/page1">Page1</Link>
                </div>
                <div className="side-nav-item">
                    <i className="fas fa-male  side-nav-icon"></i><Link to="/reporter/page2">Page2</Link>
                </div>
            </div>
        );
      }
    }

export default SideNav;

登录正常，但是当我选择侧面导航时，URL转到/ reporter / page1，但这只是银行。我认为这是因为它正在查看App组件的路由，却一无所获。我想我可以将所有内容移到App组件，并将侧面导航栏的可见性设置为none。有人知道这种模式的最佳做法吗？

Answer 1

您不应有两个路由器，最佳做法是在一个地方处理所有路由。您的代码无法正常工作，因为路由器无法在“ reporter / page1”路由中找到合适的组件来呈现，因为它正在查找的第一个路由器中找到。

您需要在一个地方处理所有路由。这也将使您能够轻松地使用/login

中的<Redirect />组件来重定向到react-router-dom路由

您可以这样做

class SomeComponent extends Component {
    ...
    redirectIfNotLoggedIn = () => {
        return this.state.isLoggedIn && <Redirect to={'/login'} />
    }

    render() {
        return (
            <div>
                 {this.redirectIfNotLoggedIn()}
                 <-- Actual component code -->
            </div>
        )
    }
}

使用其他组件中的导航登录

1 个答案: