有没有什么方法可以在单击按钮时使用 React Router v6 打开页面

Question

这是 App.js 文件，其中将包含主页，其中有一个继续按钮。“继续”按钮将引导用户进入主页，但不幸的是，它不是将用户引导至主页，而是在“继续”按钮之后打开主页

function App() {
  return (  
     <div className="App"  > 
  <MainPage/>
  <Routes>
          <Route path="home" element={<Home />} />
          <Route path="discover" element={<Discover />} />
          <Route path="shop/skincare" element={<SkinCare />} />
          <Route path="shop/fragnance" element={<Fragnance />} />
          <Route path="shop/makeup" element={<Makeup />} />
          <Route path="shop/hair" element={<Hair />} />
          <Route path="details" element={<DetailsPage />} />
          <Route path="bucket" element={<Bucket />} />     
</Routes>
  </div>
  );
}

export default App;

它是 MainPage 组件，仅包含背景图像和 conitnue 按钮导出默认函数 MainPage() { return (

    <div>
       <div class="text-center" style={{padding:"22%"}}>
            <button type="button"  class="btn btn-secondary" style={{backgroundColor:"black"}}><Link to="home" style={{color:"white",textDecoration:"none"}}>Conitnue</Link></button>
            
          </div>
          </div>
   
  )
}

Answer 1

您尝试过使用Navigate吗？React-router v6 不再使用 useHistory，他们用 useNavigate 替换了它。

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();

然后

onClick={() => navigate('anypage')}

Answer 2

因此，您看到您的<MainPage />页面组件和您的其他页面组件应该显示的任何内容的原因是因为您的内容<MainPage />未包含在您的Routes.

组件的放置方式使得无论页面要显示什么，都会<MainPage />显示在顶部。通常，您将诸如 a 之类的内容放置navbar在页面上方Routes，以便它始终呈现在页面顶部。

要修复您的代码，我只需<MainPage />像这样进入您的路由器：

function App() {
    return (  
        <div className="App"  > 
            <Routes>
                <Route path="/" element={<MainPage />} />
                <Route path="home" element={<Home />} />
                <Route path="discover" element={<Discover />} />
                <Route path="shop/skincare" element={<SkinCare />} />
                <Route path="shop/fragnance" element={<Fragnance />} />
                <Route path="shop/makeup" element={<Makeup />} />
                <Route path="shop/hair" element={<Hair />} />
                <Route path="details" element={<DetailsPage />} />
                <Route path="bucket" element={<Bucket />} />     
            </Routes>
        </div>
    );
}

您应该始终将应用程序中的所有页面放置在路线下，以便在 url 上显示正确的页面。<MainPage />在这种情况下，因为您有be的路径/，所以这将是您的应用程序的登录页面（他们看到的第一页）。

对于任何重定向或页面切换，请像使用一样处理它<Link to... />

奖励：如果您想确保一次只加载一个页面，您也可以将您的内容包装Routes在<Switch>声明中并将其更改path为exact path:)