反应如何将网址构建为“http://localhost:3000/app?path=user.home”

Question

如何提供？path=some_path 每次我只想更改 some_path 来访问主页、关于、详细信息等 在 React 中获得此功能的有效且可靠的方法是什么？

我对路由器有点熟悉，但其功能对我来说并不新鲜

我也在使用React-router-dom v6

Answer 1

应用程序.js

import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { PageLayout } from './PageLayout';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<div>Root</div>}/>
                <Route path="/app" element={<PageLayout/>}/>
            </Routes>
        </BrowserRouter>
    );
}

export default App;

页面布局.js

import React from 'react';
import Home from './Home';
import About from './About';

export const PageLayout = () => {
    const query = new URLSearchParams(window.location.search)
    const url = query.get('path')

    const RenderOutlet = () => {
        if (!url) {
            return <Home />;
        }
        switch (url) {
            case 'home': return <Home/>;
            case 'about': return <About/>;
            default: return <div>404! Page Not Found!</div>;
        }
    }

    return (
        <div>
            <RenderOutlet/>
        </div>
    );
};