БЛОГ НА HUSL


При выполнении маршрутизации с помощью React Router меняется ссылка, но не отображается контент самой страницы

Автор вопроса: Рома Янкевич

мой код App.js

import Navibar from './components/Navsbar';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Routes
 
  
} from "react-router-dom";
import './App.css';
import {Home} from './Home';
import {ListProduct} from './ListProduct';


function App() {
  return (
    <>
     
    <Router>
    <Navibar/>
    <Routes>
    
    <Route exact path='/' component={Home} />
      <Route exact path="/ListProduct" component={ListProduct}/>

     
    </Routes>
    </Router>
    </>
  );
}

export default App;

Home.js

    import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './Home.css';
import {Container,Row,Col,Navbar,Nav,Button,FormControl,Form,Image,Carousel,Card} from 'react-bootstrap';
 
 export const Home =() =>{
    return(
      <div className ="site">
<Container>
  <Row>
    <Col> 
   
    <Navbar bg="light" expand="lg">
  <Container fluid>
    <Navbar.Brand href="#">Home</Navbar.Brand>
    <Navbar.Toggle aria-controls="navbarScroll" />
    <Navbar.Collapse id="navbarScroll">
      <Nav
        className="me-auto my-2 my-lg-0"
        style={{ maxHeight: '100px' }}
        navbarScroll
      >
        <Nav.Link href="#action1">List Product</Nav.Link>
        
      </Nav>
      <Form className="d-flex">
        <FormControl
          type="search"
          placeholder="Search"
          className="me-2"
          aria-label="Search"
        />
        <Button variant="outline-success">Search</Button>
      </Form>
    </Navbar.Collapse>
  </Container>
</Navbar>

</Col>
  </Row>
</Container>
<Container>
  <Row>
    <Col><Image src="https://www.logaster.com/blog/wp-content/uploads/2020/03/0082.png" fluid /></Col>
  </Row>
</Container>
<Container>
  <Row>
    <Col>
    <div className="carousel">
    <Carousel fade>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://static.ukrinform.com/photos/2017_07/thumb_files/630_360_1500536844-3438.jpg"
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>Овочі та фрукти</h3>
     
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://znaj.ua/images/2016/06/26/50307.jpg"
      alt="Second slide"
    />

    <Carousel.Caption>
      <h3>М'ясні продукти</h3>

    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://fp.com.ua/wp-files/2018/10/Diary_products.jpg"
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Молочні продукти</h3>
     
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>
</div>
    </Col>
  </Row>
</Container>
<div className="text">
  <Row>
    <Col>Хіти продажу</Col>
  </Row>
  </div>

<Container>
  <div className = "cards">
  <Row>
    <Col><Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="https://static.ukrinform.com/photos/2017_07/thumb_files/630_360_1500536844-3438.jpg" />
  <Card.Body>
    <Card.Title>Овочі та фрукти</Card.Title>
    <Card.Text>
     Свіжі овочі та фрукти
    </Card.Text>
    <Button variant="primary">Детальніше</Button>
  </Card.Body>
</Card></Col>
    <Col><Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="https://znaj.ua/images/2016/06/26/50307.jpg" />
  <Card.Body>
    <Card.Title>М'ясні продукти</Card.Title>
    <Card.Text>
    М'ясні містять багато білків
    </Card.Text>
    <Button variant="primary">Детальніше</Button>
  </Card.Body>
</Card></Col>
    <Col><Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="https://fp.com.ua/wp-files/2018/10/Diary_products.jpg" />
  <Card.Body>
    <Card.Title>Молочні продукти</Card.Title>
    <Card.Text>
    Молочні продукти містять багато кальцію
    </Card.Text>
    <Button variant="primary">Детальніше</Button>
  </Card.Body>
</Card></Col>
  </Row>
  </div>
</Container>


</div>
    )
}

ListProduct.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './Home.css';
import {Container,Row,Col,Navbar,Nav,Button,FormControl,Form,Image,Carousel,Card} from 'react-bootstrap';
 
 export const ListProduct =() =>{
    return(
      <div className ="site">
<Container>
  <Row>
    <Col> 
   
    <Navbar bg="light" expand="lg">
  <Container fluid>
    <Navbar.Brand href="#">Home</Navbar.Brand>
    <Navbar.Toggle aria-controls="navbarScroll" />
    <Navbar.Collapse id="navbarScroll">
      <Nav
        className="me-auto my-2 my-lg-0"
        style={{ maxHeight: '100px' }}
        navbarScroll
      >
        <Nav.Link href="#action1">List Product</Nav.Link>
        
      </Nav>
      <Form className="d-flex">
        <FormControl
          type="search"
          placeholder="Search"
          className="me-2"
          aria-label="Search"
        />
        <Button variant="outline-success">Search</Button>
      </Form>
    </Navbar.Collapse>
  </Container>
</Navbar>

</Col>
  </Row>
</Container>
<Container>
  <Row>
    <Col><Image src="https://www.logaster.com/blog/wp-content/uploads/2020/03/0082.png" fluid /></Col>
  </Row>
</Container>
<Container>
  <Row>
    <Col>
    <div className="carousel">
    <Carousel fade>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://static.ukrinform.com/photos/2017_07/thumb_files/630_360_1500536844-3438.jpg"
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>Овочі та фрукти</h3>
     
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://znaj.ua/images/2016/06/26/50307.jpg"
      alt="Second slide"
    />

    <Carousel.Caption>
      <h3>М'ясні продукти</h3>

    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://fp.com.ua/wp-files/2018/10/Diary_products.jpg"
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Молочні продукти</h3>
     
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>
</div>
    </Col>
  </Row>
</Container>
<div className="text">
  <Row>
    <Col>Хіти продажу</Col>
  </Row>
  </div>

<Container>
  <div className = "cards">
  <Row>
    <Col><Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="https://static.ukrinform.com/photos/2017_07/thumb_files/630_360_1500536844-3438.jpg" />
  <Card.Body>
    <Card.Title>Овочі та фрукти</Card.Title>
    <Card.Text>
     Свіжі овочі та фрукти
    </Card.Text>
    <Button variant="primary">Детальніше</Button>
  </Card.Body>
</Card></Col>
    <Col><Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="https://znaj.ua/images/2016/06/26/50307.jpg" />
  <Card.Body>
    <Card.Title>М'ясні продукти</Card.Title>
    <Card.Text>
    М'ясні містять багато білків
    </Card.Text>
    <Button variant="primary">Детальніше</Button>
  </Card.Body>
</Card></Col>
    <Col><Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="https://fp.com.ua/wp-files/2018/10/Diary_products.jpg" />
  <Card.Body>
    <Card.Title>Молочні продукти</Card.Title>
    <Card.Text>
    Молочні продукти містять багато кальцію
    </Card.Text>
    <Button variant="primary">Детальніше</Button>
  </Card.Body>
</Card></Col>
  </Row>
  </div>
</Container>


</div>
    )
}

Navibar.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

import {Container,Row,Col,Navbar,Nav,Button,FormControl,Form} from 'react-bootstrap';
import { Link } from 'react-router-dom';

const Navibar = () =>{
    return(
        <Container>
  <Row>
    <Col> 
   
    <Navbar bg="light" expand="lg">
  <Container fluid>
    <Navbar.Brand href="/">Home</Navbar.Brand>
    <Navbar.Toggle aria-controls="navbarScroll" />
    <Navbar.Collapse id="navbarScroll">
      <Nav
        className="me-auto my-2 my-lg-0"
        style={{ maxHeight: '100px' }}
        navbarScroll
      >
        <Nav.Link  href="/ListProduct">List Product</Nav.Link>
        
      </Nav>
      <Form className="d-flex">
        <FormControl
          type="search"
          placeholder="Search"
          className="me-2"
          aria-label="Search"
        />
        <Button variant="outline-success">Search</Button>
      </Form>
    </Navbar.Collapse>
  </Container>
</Navbar>

</Col>
  </Row>
</Container>
    )
}
export default Navibar;

На странице так виходитНа странице кнопки есть а контента нет

Пробовал разные способы и варианты.Помогите пожалуйста


Источник

Ответы (1 шт):

Автор решения: Sanya H

С 6 версии роутера нужно использовать element вместо component

<Route exact path='/' element={<Home />} />
  <Route exact path="/ListProduct" element={<ListProduct />}/>

Но зачем Вы в компонентах навбары разместили?

→ Ссылка

licensed under cc by-sa 3.0 with attribution.