我正在创建带有侧面导航和标题栏的工作区。但是,如果用户未登录,我想将他们定向到登录页面。
主要组成如下
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和history:
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。有人知道这种模式的最佳做法吗?
最佳答案
您不应该有两个路由器,最佳实践是在一个地方处理所有路由。您的代码无法正常工作,因为路由器无法在“ 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>
)
}
}
关于javascript - 使用其他组件中的导航登录,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54026950/