Блог

Главная - Вопросы по программированию - Переход к другому компоненту из компонента [React]

Переход к другому компоненту из компонента [React]

#javascript #html #reactjs #components #jsx

#javascript #HTML #reactjs #Компоненты #jsx

Вопрос:

У меня есть два компонента в src / components, названные как Comp1.js и Comp2.js

Comp1.js имеет следующий код:

 export default class Comp1 extends Component{
  .... 
  render(){
    return(
      <h1>Comp1</h1>
      <div> In comp1 </div>
      <BrowserRouter>
          <Link to="/comp2"> Comp2 </Link>
          <Switch>
             <Router path="/comp2" component={Comp2} />
          </Switch>
      </BrowserRouter>
    )
  }
}

Comp2.js имеет следующий код:

 export default class Comp2 extends Component{
 ...
 render(){
   return(
    <h1>Comp2</h1>
    <div> In comp2 </div>
   )
 }
}

Всякий раз, когда я нажимаю ссылку в Comp1, она перенаправляет меня на Comp2, но также показывает заголовок «Comp1», div «В comp1» и ссылку. Я хочу просто отобразить Comp2 и избавиться от заголовков Comp1, div и link. Дайте мне знать, если вам нужны дополнительные разъяснения.

Ответ №1:

Вы должны переместить оболочку маршрутизатора браузера в корень основного приложения. Так настраивается маршрутизация приложения react. Затем вы можете использовать <Link to="/comp2"> Comp2 </Link> inside comp1 и правильно перейти к comp2, не имея заголовка comp1, когда вы находитесь в comp2.

 import React from "react"
 import { render } from "react-dom"
 import { BrowserRouter, Switch, Route } from "react-router-dom"
 import Home from "./Home"
 import Comp1 from "./Comp1"
 import Comp1 from "./Comp2"

 const App = () => (
 <BrowserRouter>
  <Switch>
   <Route path="/" component={Home} exact />
   <Route path="/comp1" component={Comp1} exact />
   <Route path="/comp2" component={Comp2} exact />
 </Switch>
</BrowserRouter>
)

Comp1,

 export default class Comp1 extends Component{
  .... 
  render(){
    return(
      <h1>Comp1</h1>
      <div> In comp1 </div>
      <Link to="/comp2"> Comp2 </Link>
    )
  }
}

Комментарии:

1. Разве нет способа, я могу сделать все внутри Comp1. Поскольку переход к приложению и настройка каждой ссылки были бы настолько запутанными

2. Проблема в том, что если вы где-то используете браузер-маршрутизатор, то на самом деле маршруты внутри него будут отображаться только внутри браузера-маршрутизатора. Так что было бы лучше сформулировать это так. Есть одна вещь, которую вы можете сделать наверняка, а не вводить BroserRouter в app.js . Определите, где должны отображаться comp1 и comp2. Поместите туда маршрутизатор браузера. Затем импортируйте comp1 и comp2. Но вы должны попробовать.

3. Это сработало отлично! Хитрость в том, чтобы оставить App.js «пустой» (без каких-либо элементов, которые он выводит на экран). Затем настройте <Route path=»/» component={Home} exact />, чтобы указать на вашу «домашнюю страницу». Таким образом, всякий раз, когда сайт загружается, экран не будет пустым (из-за App.js ), сайт перейдет на домашнюю страницу, которая будет отображена. Красиво! @DushanRanasinghe ты спас меня от более чем 10 часов попыток исправить эту проблему! Асанте сана!