Javascript 在React with outlet中使用V6的嵌套布线

我正在尝试嵌套路由，但是当我到达预期的组件时，前面的一个也显示在React js中

这是App.js组件
对代码的解释很少： /tech是主要组件，/detail是我想去的嵌套组件 '''

{
返回
})}>
{
返回
})} />

这里是NewsCard.js

在这个组件中，我想转到detail.js，因此我使用了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>);

}

康斯特新闻卡=（道具）=>{
返回(
{props.title}
{props.author}
{props.content}
阅读更多
);
}

这是details.js我想去的地方

    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>);
    }

常量细节=（道具）=>{
返回(
“你好”
“检查…”
ll
);
}

问题是：

当我谈到newscard.js和detail.js的细节时，这两个组件都保持在屏幕上。但新闻卡应该保持隐藏，细节应该显示在屏幕上

    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>);
    }