BrowserRouter не отображает вид другого компонента на той же странице - PullRequest
Новая
       31

BrowserRouter не отображает вид другого компонента на той же странице

0 голосов
/ 12 июля 2020

У меня очень простое приложение с каруселью. На каждом слайде есть кнопка. Когда пользователь нажимает кнопки, в нижнем контейнере должна отображаться соответствующая страница. Я передаю отдельный слайд из родительского компонента как свойство, называемое содержимым. Ниже мой код

Snippet from 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;

ниже - мое приложение. js где я хочу, чтобы мой контент отображался при нажатии кнопки. 

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

URL сверху меняется, но вид - нет. Очень признателен за любую помощь

1 Ответ

0 голосов
/ 14 июля 2020

РЕШЕНИЕ: Я удалил элемент BrowserRouter из SlideContent. js и MainContent. js. Добавил его как родительский для SliderContainer и MainContent. Ниже показаны все измененные файлы.

Удален BrowserRouter из SlideContent. js

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>
        )
      }

Удален BrowserRounter из MainContent. js

class MainContent extends React.Component{

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

Добавлен BrowserRouter в родительский элемент SliderContainer и приложения MainContent. js

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

export default App;
...