React-Router-Dom：让主页成为登陆页面

Question

几个月后我又恢复了反应，atm 有点生锈了。我有一个带有主页、关于、联系人组件的网站，当用户登陆我的网站时，我希望主页成为登陆页面。

我有一个 index.js 页面，它使用 react-router-dom 处理我的路由

  <Provider store={store}>
   <div className='container'>
    <BrowserRouter>
     <div>
      <Route path='/' component={App} />
      <Route path='/Home' component={Home} />
      <Route exact path='/About' component={About} />
      <Route exact path='/Contact' component={ContactView} />
     </div>
    </BrowserRouter>
   </div>
  </Provider>

我的应用组件包含我的菜单

class App extends Component {
 constructor(props) {
    super(props);
    this.state = { activeItem: 'Home' }
  }

  componentDidMount() {this.setState({ activeItem: 'Home' })}

  handleItemClick = (e, { name }) => this.setState({ activeItem: name });


  render() {
   const { activeItem } = this.state;
    return (
      <div>
         <Menu pointing secondary color='blue' stackable={true}>
           <Link to='/Home'>
             <Menu.Item name='Home' to="/Home" active={activeItem === 'Home'} onClick={this.handleItemClick} />
           </Link>
           <Link to={'/About'}>
             <Menu.Item name='About' to="/About" active={activeItem === 'About'} onClick={this.handleItemClick} />
           </Link>
           <Link to={'/Contact'}>
             <Menu.Item name='Contact' to="/ContactView" active={activeItem === 'ContactView'} onClick={this.handleItemClick} />
           </Link>
         </Menu>
      </div>
        );
  }
};

export default App;

由于 App 组件的 path='/' 它始终可见，并且当用户登陆我的网站时，唯一处于活动状态的是菜单，如下所示。

当用户打开我的网站时，如何使登录页面直接转到 /Home 并同时激活菜单？

Answer 1

首先，确保您使用的是 ReactRouterDom (ReactRouter v 4.0 +)。在 ReactRouterDom 中，您可以通过使用 Switch 来实现这一点。 Switch 所做的是，它遍历所有路由，并根据指定的路径渲染组件。最后，您可以再添加一行，如果指定的路径都不满足，则将其重定向到指定的路径。

就在关闭<Switch> 组件之前，添加这一行 -

<Route path="*" component={Home} />

如果您想观看现场演示，我已经为您制作了一支笔。您可以在此 codepen 链接查看代码 - https://codepen.io/anon/pen/RxgVqM

Answer 2

您所要做的就是将 home 组件放在 App 组件中。我还建议创建一个导航栏组件以进行更多模块化。

render() {
   const { activeItem } = this.state;
    return (
      <div>
         <Menu pointing secondary color='blue' stackable={true}>
           <Link to='/Home'>
             <Menu.Item name='Home' to="/Home" active={activeItem === 'Home'} onClick={this.handleItemClick} />
           </Link>
           <Link to={'/About'}>
             <Menu.Item name='About' to="/About" active={activeItem === 'About'} onClick={this.handleItemClick} />
           </Link>
           <Link to={'/Contact'}>
             <Menu.Item name='Contact' to="/ContactView" active={activeItem === 'ContactView'} onClick={this.handleItemClick} />
           </Link>
         </Menu>
<HomeComponent/>
      </div>
        );
  }

这是我在 Redux 的一个项目中所做的一个示例。这里唯一的区别是下面的示例代码我使用应用程序级别仅基于条件值进行渲染（如果 auth show home否则显示登录等）

render() {
        return (
            <div className='home'>

                <BrowserRouter>
                    <div>

                        {this.props.auth ?
                            <NavBar /> :
                            undefined}

                        <Switch>

                        <Route exact path="/encyclopedia" component={() => this.props.auth ? <Encyclopedia /> : <Redirect to='/login' />} />
                        <Route exact path="/login" component={() => !this.props.auth ? <SignInScreen /> : <Redirect to='/' />} />
                        <Route exact path="/" component={() => this.props.auth ? <Home /> : <Redirect to='/login' />} />
                        <Route exact path="/bikes" component={() => this.props.auth ? <BikeContainer /> : <Redirect to='/login' />} />
                        <Route component={() => <FourOhFour/>}/>

                        </Switch>

                    </div>
                </BrowserRouter>
            </div>
        )
    }