Nested Routing using V6 in React with outlet

  javascript, nested, outlet, reactjs, routes

I’m trying nested routing but when I reach the intended component, the previous one also shows there in React js.

This is App.js component
Little explanation of code is :
/tech is main component and /detail is nested component where I want to go
”’

  <BrowserRouter>
        <Header />
        <Routes>
        
          <Route path="/tech" element={
            statetech.map((value, key) => {
              return <Newscard key={key} {...value} />
            })}>
              
            <Route path="/detail" element={
              statetech.map((value, key) => {
                return <Detail key={key} {...value} />
              })} />
          </Route>
        

        </Routes>
      </BrowserRouter>

this is NewsCard.js

from this component, I want to go to detail.js so I used outlet


    const Newscard = (props) => {
        
        return (
        <div >
                    <div className="card w-25 " style={{marginLeft:"500px", marginTop:"10px"}} >
                        <img src={props.urlToImage} className="card-img-top" alt="..." />
                        <div className="card-body">
                            <h5 className="card-title">{props.title}</h5>
                            <h6 className="card-subtitle mb-2 text-muted">{props.author}</h6>
                            <p className="card-text">{props.content}</p>
                            <Link className="card-link" to="detail">read more</Link>
                           
                            <Outlet/>
                         
                        </div>
                    </div>        
            
            
        </div>);

}

this is details.js where I want to go.


    const Detail=(props)=>{
       
        return(<div>
    <div className="card w-25 " style={{marginLeft:"500px", marginTop:"10px"}} >
                        <img src={""} className="card-img-top" alt="..." />
                        <div className="card-body">
                            <h5 className="card-title">"hello"</h5>
                            <h6 className="card-subtitle mb-2 text-muted">"checking.."</h6>
                            <p className="card-text">ll</p>
                            
                        </div>
                    </div>    
        </div>);
    }

problem is:

when I reach to detail the newscard.js and detail.js both component remain on screen.but newscard should stay hide and detail should show on screen.

Source: Ask Javascript Questions

LEAVE A COMMENT