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

Posted 2023-02-21

【中文标题】React-Router-Dom：让主页成为登陆页面

【英文标题】：React-Router-Dom: Make Home The Landing Page

【发布时间】：2018-06-11 19:26:49

【问题描述】：

几个月后我又恢复了反应，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 并同时激活菜单？

【问题讨论】：

我会查看***.com/questions/29552601/… 中的答案，看看是否有任何帮助您。

@SteveB 我之前遇到过，它已经过时了

【参考方案1】：

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

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

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

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

【讨论】：

嘿，所以这种工作。当我登陆页面时，我的 home 组件处于活动状态，但是当我转到 about 和 contact 组件时，该组件也是可见的。就好像我从我的应用程序组件中渲染了 home 组件。

@Generaldeep 您也可以为最后一个 Route 路径添加确切的内容。所以，它看起来像 - 。让我知道这是否有效。

【参考方案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>
        )
    

【讨论】：

嘿，在应用组件中添加主页组件不起作用，因为应用组件（导航）始终可见。我现在是否通过将我的应用组件作为导航来遵循不正确的设计模式？

是的，您应该创建一个单独的组件，即您的导航栏，并将其放在主组件中，或者登录后显示的任何组件中。