BrowserRouter 不会在同一页面中呈现另一个组件的视图答案

【问题标题】：BrowserRouter does not render view of another component in the same pageBrowserRouter 不会在同一页面中呈现另一个组件的视图
【发布时间】：2020-11-01 16:46:14
【问题描述】：

我有一个非常简单的带有 Carousel 的应用程序。每张幻灯片都有一个按钮。当用户点击按钮时，它应该在底部容器中显示相应的页面。我将父组件中的单个幻灯片作为称为内容的属性传递。下面是我的代码

来自 Slidebar.js 的片段将幻灯片传递给 SlideContent

          <div css={SliderBarCss}>
                                  {this.props.slides.map((slide, i) => (
                  <SlideContent  key={i} content={slide} />
                ))}            
             
            </div>

幻灯片内容.js

/** @jsx jsx */
import React from 'react';
import { BrowserRouter, Link } from 'react-router-dom';
import Routes from './Routes';

import { css, jsx } from '@emotion/core'

export default class SlideContent extends React.Component {

    constructor(props) {
        super(props);
    }
     render(){

      <div>
          <h1>{this.props.content.title}</h1>
          <p>{this.props.content.description}</p>
          <BrowserRouter>
             <Link to={this.props.content.link}><button>{this.props.content.button}</button> 
             </Link>
          </BrowserRouter>
      </div>
        )
      }
}

我在另一个文件 Routes.js 中定义了路由

import React, { Component } from 'react';
import { css, jsx } from '@emotion/core'

import { Route, Link, Switch, Redirect } from 'react-router-dom';
import Component1 from '../innerComponents/Component1';
import Component2 from '../innerComponents/Component2';
import HomeComponent from '../innerComponents/Home';

 class Routes extends Component{
    constructor(props){
        super(props);
      
    }

    render(){
        return(
            
         <Switch>
          <Route exact path="/Home" component={HomeComponent} />
          <Route exact path="/">
          <Redirect to="/Home" />
          </Route>
          <Route exact path="/Component1" component={Component1} />
          <Route exact path="/Component2" component={Component2} />
         </Switch>
              
        )
    }
}



export default Routes;

下面是我的 app.js，我希望我的内容在按钮点击时显示出来。

function App() {
  return (
    <div className="App">
       <SliderContainer/>     
      
      <BrowserRouter>
        <Route component={Routes}></Route>                
      </BrowserRouter>
    </div>
  );
}

顶部的 URL 正在更改，但视图没有。非常感谢任何帮助

【问题讨论】：

检查是否在 app.js 中导入 SliderContainer。
我在 app.js 中导入 .. 当我检查 SlideContent 时，变量 this.props.content.link 的值无法识别。但是在单击按钮时，网址会更改，但视图未呈现
我看不到你在哪里传递你将道具传递给 SildeContainer？但是你得到内容对象的其他值了吗？
@JonathanAkweteyOkine 我将父组件添加到原始帖子中。我得到了所有其他的价值。即使我点击按钮，网址也在变化
我很难在我的最后复制您的问题。但是你可以在你的 app.js 中尝试这个，为什么不在 BrowserRouter 中的 route.js 中进行切换并在那里导入组件呢？否则，请创建一个小提琴或 codepen 并分享链接。

标签： reactjs react-router react-router-dom react-router-v4 react-router-component

【解决方案1】：

解决方案：我从 SlideContent.js 和 MainContent.js 中删除了 BrowserRouter 元素。将其作为父项添加到 SliderContainer 和 MainContent。下图都是修改过的文件

从 SlideContent.js 中移除 BrowserRouter

export default class SlideContent extends React.Component {

    constructor(props) {
        super(props);
    }
     render(){

      <div>
          <h1>{this.props.content.title}</h1>
          <p>{this.props.content.description}</p>
         
             <Link to={this.props.content.link}><button>{this.props.content.button}</button> 
             </Link>

      </div>
        )
      }

从 MainContent.js 中移除 BrowserRounter

class MainContent extends React.Component{

    render(){
        return(
              <Route component={Routes}></Route>
          
        )
    }
}

将 BrowserRouter 添加到 SliderContainer 和 MainContent 的父级 app.js

function App() {
  return (
    <div className="App">
      <BrowserRouter>       
        <SliderContainer/>     
        <MainContent/>
       </BrowserRouter>          
    </div>
  );
}

export default App;

【讨论】：