0

我有一个非常简单的带有 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 正在更改，但视图没有更改。非常感谢任何帮助

4

1 回答 1

0

解决方案：我从 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;
于 2020-07-14T08:42:42.587 回答