React-Router-Dom：让归主登陆页面

Question

几个月后我又开始反应，所以它有点生锈了。我有一个包含Home，About，Contact组件的站点，当用户登陆我的站点时，我希望主页成为登录页面。

我有一个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组件的路径='/'它始终可见，当用户登陆我的网站时，唯一活跃的是菜单，如下图所示。

当用户打开我的网站时，如何让目标网页直接转到/ Home并同时激活菜单？

Answer 1

您所要做的就是将主组件放在App组件中。我还建议创建一个navbar组件来模块化更多。

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 else show login等）

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>
        )
    }

Answer 2

首先，确保使用ReactRouterDom（ReactRouter v 4.0 +）。在ReactRouterDom中，您可以使用Switch实现此目的。 Switch所做的是，它遍历所有路由，并根据指定的路径呈现组件。最后，如果没有满足指定的路径，则可以再添加一行，将其重定向到指定的路径。

在结束<Switch>组件结束之前，添加此行 -

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

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