小编M.K*_*.KH的帖子

我试图在 React Router v6 中使用多个路径/路由来渲染相同的组件

使用以前版本的 React router dom 我可以这样做并且它会工作：

<Route exact path={["/", "/home"]}>
     <Home />
</Route>

<Route exact path={"/" | "/home"}>
     <Home />
</Route>

现在使用 v6 我正在尝试同样的事情，但它不起作用

<Route exact path={["/","/home"]} element={<Homepage />} />

我该怎么办？到底是什么改变了它不起作用？

我进行路由的 App.js 的完整代码

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Contact from './components/Contact';
import Homepage from './components/Homepage';
import Projects from './components/Projects'

function App() {
  return (<Router>
    <Navbar /> …

我的应用程序中有一个抽屉式导航，其中包含多个组件/屏幕，其中一个组件是也包含多个屏幕的堆栈导航，问题是我想仅在内部堆栈的某个屏幕上隐藏抽屉标题，并且继续在堆栈的其他屏幕上显示它。我的代码是这样的

抽屉

          <NavigationContainer>
            <Drawer.Navigator initialRouteName="Home" >
              <Drawer.Screen name="main" component={MyStack} /> //this is the inner stack
              <Drawer.Screen name="track" component={ProgressTrackerScreen} />
              <Drawer.Screen name="reminder" component={DailyReminderScreen} />
              <Drawer.Screen name="bookmarks" component={BookmarksScreen} />
            </Drawer.Navigator>
          </NavigationContainer>

堆

    <Stack.Navigator initialRouteName="MainScreen" screenOptions={{
      headerTitleAlign: "right",
      header: () => null
    }} >
      <Stack.Screen name="MainScreen" component={MainScreen} options={{
          title: 'Main', //i want an option here to hide the drawer nav header on this screen only
        }} />
      <Stack.Screen name="page" component={Page} />
    </Stack.Navigator>

如何才能实现这一目标？

我正在使用引导程序 4，我有一个带有 d-flex 的 div，它应该在“lg”（屏幕 1200px 及更大）断点处显示方向行，并且当它在手机“sm”或“xs”上使用时将使用断点，它会显示方向列并表现得像一列，但无论我如何尝试，它始终保持一行

我试过

<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">

和

<div class="d-flex flex-xs-column flex-lg-row justify-content-lg-around">

但它不起作用..我误解了断点系统还是什么？我的意思是我会使用 CSS 媒体查询做同样的事情。

这是完整的代码

<div class="w-75 my-5 mx-auto">
                <h1 class=" text-center my-3">Awards won</h1>

                <div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
                    
                    <div class="d-flex flex-column col-sm-4 align-items-center">
                        <img src="./assets/award1.PNG" width="150" height="150" class="award-img">
                        <span> Award title </span>
                        <hr class="bg-dark w-50 m-0"/>
                        <span class="w-75 text-center text-break">Best cake made in 2019</span>
                    </div>

                    <div class="d-flex flex-column col-sm-4 align-items-center">
                        <img src="./assets/award2.PNG" width="150" height="150" class="award-img">
                        <span> Award title </span>
                        <hr class="bg-dark …