当前位置: 首页 > 知识库问答 >
问题:

React路由器无法呈现路由

太叔弘壮
2023-03-14

react&React-Router的新功能。我正在使用react-router-4

我有以下组件-login-home-header-sidebar-content

登录组件没有标题或侧栏。

这就是我的路由

应用程序JS

<Switch>
   <Route exact path='/login' component={Login}/>
   <Route exact path='/home' component={Home}/>
</Switch>

然后在我的Home组件中,我有侧边栏和内容。

home.js呈现方法

<Grid>
    <Grid.Row>
        <Grid.Column width={3}>
            <SideBar/>
        </Grid.Column>
        <Grid.Column width={13}>
          <Route exact path='/home/dashboard' render={() => <div>Home</div>} />
        </Grid.Column>
    </Grid.Row>
</Grid>

侧边栏组件有一个链接,该链接具有“to”值“/home/dashboard”。

不幸的是,这并不奏效。单击侧栏链接时,将加载一个空白页。

根据我的理解,在react Router4中,您可以呈现路由器层次结构中的任何位置的路由。这就是我试图通过在“Grid.Column Width={13}”div中呈现路由来实现的。

我错过了什么?

共有1个答案

白驰
2023-03-14

交换机中的第二条路由才是问题所在。应该是:

<Switch>
   <Route exact path='/login' component={Login} />
   <Route component={Home} />
</Switch>
 类似资料:
  • 我有一个名为Dashboard的父组件,它被呈现为路由,如下所示: 我试着嘲笑每个人在嵌套路由上的解决方案,但我似乎无法解决我的问题。

  • 问题内容: 我正在创建SPA,并尝试使用软件包版本在应用程序中设置“路由” 。 我的路线定义如下: 基本上,我想设置路由,以便对未定义路由的页面的任何请求都转到组件。 如何做到这一点?上面的解决方案在请求页面时同时呈现和组件。 亲切的问候 问题答案: 这是官方教程中的示例,如何避免呈现多条路线

  • 在标记为副本之前,请仔细阅读此内容,我向您保证,我已经阅读并尝试了每个人在stackoverflow和github上提出的关于此问题的所有建议。 我在我的应用程序中有一条路线,如下所示; route rendering呈现打开用户角色的组件,并基于该角色惰性加载正确的Routes组件,Routes组件呈现主页的开关。简化后,如下所示。 然后是路由组件 因此,问题是每当用户从/导航到/秒等...应用

  • 我意识到以前有人问过我这个问题,请容忍我,因为我还在学习这个问题。我想我已经尝试了所有的解决方案,但是没有运气。 问题是:当重定向到时,它没有呈现预期的组件() 我已经实现了一个,如下所示; privaterout.js 这就是我使用它的地方; index.js 在这个问题中要补充几点: 我确认重定向确实发生在(我通过将

  • 问题内容: 我正在尝试在我的组件之一中进行嵌套路由。 这是父组件: 这是子组件: 可以很好地呈现路线,但呈现完全空白的页面。知道为什么会这样吗? 问题答案: 发生此现象的原因是在父路由上提到了一个属性 因此,发生的事情是react-router看到了一条匹配的路径,然后尝试从顶层开始进行匹配。它看到两条路线,一条是,另一条是。它们都不符合所需的路径,因此您会看到空白页 你需要写 因此,当您执行此操

  • 我有一个React应用程序,目前正在使用react-router@4.2.0,当URL更改时,我正在努力渲染特定的组件。 当我尝试访问时,CityList组件返回一个PropTypes错误。我已经尝试在LocationsWrapper中的Route组件中添加,然后再添加Main config,但是,这会影响其他路由,例如,使其变为空。 //浏览器路由器 //路由器配置-(路由) 我最好避免