单击"多媒体资料"时，如何移动到另一个页面

Question

我正在制作一个网站，在这个网站上我们有一个固定的图库按钮。

我想要它，这样当用户点击它时，用户将移动到一个完全不同的页面，并且页面上只显示照片。

为此，我尝试通过Layout.js进行布局，但效果不佳。

你可以通过代码更好地理解，下面是App.js，

import React from 'react';
import { AboutUs, Header, SpecialMenu  , Chef, Gallery} from './container';
import { Navbar } from './components';
import './App.css';
import Layout from './Layout';
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
const App = (props) => (
<BrowserRouter>
<Routes>
<Route path="/gallery" element={<Gallery/>}></Route>
</Routes>
</BrowserRouter>
);
export default App;

这是Layout.js，

import React from 'react'
import { AboutUs, Header, SpecialMenu, Chef, Gallery } from './container';
import { Navbar } from './components';
import './App.css';
export default function Layout(props) {
return (
<>
<Navbar/>
<Header/>
<AboutUs/>
<SpecialMenu/>
<Chef/>
{props.children}
</>
)
}

Answer 1

这对我有效

App.js，

import React from 'react';
import { AboutUs, Header, SpecialMenu  , Chef, Gallery} from './container';
import { Navbar } from './components';
import './App.css';
import Layout from './Layout';
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
const App = (props) => (
<BrowserRouter>
<Routes>
<Route path="/gallery" element={<Gallery/>}></Route>
<Route  path='/' element={<Layout><Navbar/></Layout>}></Route>
</Routes>
</BrowserRouter>
);
export default App;

和Layout.js

import React from 'react'
import { AboutUs, Header, SpecialMenu, Chef, Gallery } from './container';
import { Navbar } from './components';
import './App.css';
export default function Layout(props) {
return (
<>
<Navbar/>
<Header/>
<AboutUs/>
<SpecialMenu/>
<Chef/>
</>
)
}

Answer 2

如果使用react路由器v6，则需要使用Outlet组件

function Dashboard() {
return (
<div>
<Navbar/>
<Header/>
<AboutUs/>
<SpecialMenu/>
<Chef
<Outlet />
</div>
);
}

你的应用程序是这样的：

function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route path="gallery" element={<Gallery/>} />
</Route>
</Routes>
</BrowserRouter>
);
}