Блог

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

App.js

 import React, {Component} from 'react';

import {BrowserRouter, Route, Link, Routes} from 'react-router-dom';

import Buyer from './Container/Buyer/Buyer';
import Seller from './Container/Seller/Seller';

import classes from './App.css';

class App extends Component{
  render(){
    return(
      <BrowserRouter>
        <div className={classes.App}>
          <p>Shop</p>
          <ul>

              <li><Link to='/buyer'>I want to Buy</Link></li>
              <li><Link to='/seller'>I want to Sell</Link></li>
           </ul>
          
          <Routes>
            <Route path="/buyer"  element={<Buyer/>} />
            <Route path="/seller"  element={<Seller/>} />
          </Routes>

          


        </div>
      
      </BrowserRouter>
       
    )
  }
}

export default App;

 

Изначально я хочу, чтобы появлялись только ссылки и «магазин», и при нажатии на одну из ссылок «магазин» и ссылки должны исчезнуть, а представление должно только появляться.

Но в моем случае «Магазин» и ссылки не исчезают при нажатии, также изначально появляется вид покупателя, который должен появиться только после нажатия на ссылку «Я хочу купить».

Пожалуйста, дайте мне знать, если для решения этой проблемы требуется более подробное описание.

Если вы хотите, чтобы покупатель переходил к другому представлению, когда он нажимает на ссылку, используя <Link> , вам необходимо указать, какой компонент отображать, когда путь совпадает с текущим путем. Вы можете использовать атрибут «компонент».

 <Router>
 <Route path="/buyer"  component={Buyer} />
 <Route path="/seller"  component={Seller} />
</Router>
 

Ваш «импорт» должен быть изменен на «маршрутизатор». То же самое можно использовать в jsx для обертывания ваших маршрутов.

 import {BrowserRouter, Route, Link, Router} from 'react-router-dom';
 

Вы можете использовать атрибут «визуализация» для визуализации jsx в качестве компонента с помощью встроенной функции. Разница между атрибутом «компонент» и атрибутом «визуализация»
заключается в том, что атрибут компонента перемонтирует компонент, подлежащий визуализации, каждый раз, когда компонент приложения здесь оценивается.

Вы можете прочитать официальные документы для получения дополнительной информации:

https://v5.reactrouter.com/web/api/Route