라우터링크 클릭시 문제가 발생합니다

[이영아]

각각의 링크를 클릭할때 주소는 바뀌고 해당페이지로 들어가지지 않습니다...

도저히 검색해도 안나오는것같아서요... ㅠㅠㅠ 어떻게 해야될까요???ㅠㅠ

 

 

import './App.css';

import {Navbar,Container,Nav,NavDropdown,Carousel, NavLink} from 'react-bootstrap'
import  React,{ useState } from 'react';
import Data from './data';
import {Link,Route,Switch,Routes} from 'react-router-dom'
import Detail from './Detail'
import { LinkContainer } from 'react-router-bootstrap'

function App() {

  let [clock,clock변경] = useState(Data);

 

 
  return (
    <div className="App">
          <Navbar bg="light" expand="lg">
              <Container>
            <Navbar.Brand >kirakirashop</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
              <Nav className="me-auto">
               <Link exact="true" to="/">Home</Link>
               <Link exact="true" to="/detail">Detail</Link>
              {/* <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item >Action</NavDropdown.Item>
              <NavDropdown.Item >Another action</NavDropdown.Item>
              <NavDropdown.Item >Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item >Separated link</NavDropdown.Item>
            </NavDropdown> */}
          </Nav>
          </Navbar.Collapse>
          </Container>
          </Navbar>
   
   
     <Switch>
    <Route exact= {true} path="/">

          <Carousel>
          <Carousel.Item>
          <img
          size="sm"
            className="d-block w-100 carcell"
            src="https://mblogthumb-phinf.pstatic.net/MjAyMTA0MjhfMjEw/MDAxNjE5NjEwMTU3Nzk0.xsdQCdjVR9J_ZpSzYhk6FXU5rVo7iVcfU5K7vstjzJIg.-5YKnv8r9Gjbs-2EeXikqLGdyg7kGThrD-gY12t2nkMg.JPEG.avanago504/ViVi_0421_0294.jpg?type=w800"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
          </Carousel.Item>
          <Carousel.Item>
          <img
          size="sm"
            className="d-block w-100 carcell"
            src="https://file.mk.co.kr/meet/neds/2021/12/image_readtop_2021_1203097_16403223144894422.jpg"
            alt="Second slide"
          />

          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
          </Carousel.Item>
          <Carousel.Item>
          <img
            size="sm"
            className="d-block w-100 carcell"
            src="https://mblogthumb-phinf.pstatic.net/MjAyMTAxMjVfMjYz/MDAxNjExNTY4NjgwNjQ5.zH5SyZPYcY5MgGptOCIKTSCJ2-tOJ4sJWoa7YjrXv_Yg.vqt5-XsrfoFTyJFEmIkcbPcrLt25eyuvom9F1Vj_Uk4g.JPEG.nwowolf/koreadispatch-___CKcnHeyh1tD___-2.jpg?type=w800"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
          </Carousel.Item>
          </Carousel>
          <div className='container'>
            <div className='row'>
                 {
                   clock.map((item,i)=>{
                     return <Card key={i}clock={item}></Card>
                   })
                 }
              </div>

     </div>
         
    </Route>
    <Route exact={true} path="/detail" > <Detail></Detail> </Route>

    <Route exact={true} path="/:id">

    </Route>
     {/* //아무문자열이나 넣었을때 */}
   

       
 
         </Switch>
    </div>
  );
}

function Card(props){

 
  return(
     
      <div className='col-md-4'
      ></img>
      <h4>{props.clock.title}</h4>
      <p>{props.clock.content} $: {props.clock.price}</p>
      </div>
   
  )
};

export default App;

 

 

아래는 인덱스 파일입니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';

import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(
 
  document.getElementById('root')
);

root.render( <React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
 
</React.StrictMode>,)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

[codingapple]

<Route exact={true} 말고 <Route exact 으로 써봅시다 

[이영아]

exact로처음에 썼다가 안되서 exact=true로 바꾼건데 안되네요..ㅠㅠ

[codingapple]

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
// import ReactDOM from 'react-dom/client';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>

  </React.StrictMode>,
  document.getElementById('root')
);

예전 이걸로 다시 바꾸면 됩니다 

[김남용]

<React.StrictMode> 를 지우세요...

[글쓴이]

글