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

Question

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

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

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

SlideContent.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 正在更改，但视图未更改。非常感谢任何帮助

Answer 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;

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

BrowserRouter does not render view of another component in the same page

reactjs

react-router

react-router-component

react-router-v4

react-router-dom