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;

由于应用程序组件的路径=＆＃39; /＆＃39; 它始终可见，当用户登陆我的网站时，唯一的事情是＆＃39 ; s活动是如下菜单。

当用户打开我的网站时，如何让目标网页直接转到/ 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否则显示登录等）

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

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

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

2 个答案: