react练习之react-router-dom

版本为react-router-dom": "^7.7.1",

如何使用useNavigate在跳转页面的时候同时传参？

通常在react项目中，我们很多时候都需要在页面跳转的时候带一些参数，useNavigate一般有三种带参跳转的方式，废话不多说，直接上代码：

使用search, query, state如何携带参数

以及嵌套路由子路由的学习，

<Outlet /> {/* 添加Outlet组件，用于渲染子路由 */}

index.js

import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Router>
        <App />
    </Router>
);

App.js

import React from 'react';
import { Link } from 'react-router-dom';
import RouterView from './components/RouterView';

const App = () => {
    return (
        <div>
            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/about/profile">Profile</Link>
                    </li>
                    <li>
                        <Link to="/about/settings">Settings</Link>
                    </li>
                    <li>
                        <Link to="/contact">Contact</Link>
                    </li>
                </ul>
            </nav>

            {/* 这里相当于Vue的<router-view> */}
            <RouterView />
        </div>
    );
};

export default App;

components/RouterView.js

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import routes from '../routes';

const renderRoutes = routes => {
    return routes.map((route, index) => (
        <Route key={index} path={route.path} element={route.element}>
            {route.children && renderRoutes(route.children)}
        </Route>
    ));
};
console.log('renderRoutes', renderRoutes(routes));
const RouterView = () => {
    return <Routes>{renderRoutes(routes)}</Routes>;
};
/**
 * 渲染路由-RouterView解析基本就是下面这个样子
 */

/* <Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
</Routes> */

export default RouterView;

 

routes.js

import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import Profile from './pages/Profile';
import Settings from './pages/Settings';

const routes = [
    {
        path: '/',
        element: <Home />,
    },
    {
        path: '/about',
        element: <About />,
        children: [
            {
                path: 'profile/:id',
                element: <Profile />,
            },
            {
                path: 'settings',
                element: <Settings />,
            },
        ],
    },
    {
        path: '/contact',
        element: <Contact />,
    },
];

export default routes;

 

pages/About.js

import React from 'react';
import { Outlet, useNavigate } from 'react-router-dom'; // 导入Outlet组件
//在 React Router v6+ 版本中， useHistory 已被废弃，改为使用 useNavigate
function About() {
    //通过useNavigate进行路由编程式跳转
    const navigate = useNavigate();
    // serach 带参数
    const searchParams = () => {
        navigate('/contact?name=testName&age=34');
    };
    // 使用queryparams带参
    const queryParams = () => {
        navigate('/about/profile/12345678');
    };

    // 使用state带参
    const stateParams = () => {
        navigate('/about/settings', { state: { name: '测试', keyWords: '传参' } });
    };
    return (
        <div className="about-page">
            <h1>关于我们</h1>
            <button onClick={searchParams}>search方式传参</button>
            <button onClick={queryParams}>query方式传参</button>
            <button onClick={stateParams}>state方式传参</button>
            <p>这是一个使用React构建的示例应用。</p>
            <Outlet /> {/* 添加Outlet组件，用于渲染子路由 */}
        </div>
    );
}

export default About;

contact.js

import React from 'react';
import { useSearchParams } from 'react-router-dom';

export default () => {
    // 使用hook useSearchParams获取参数
    const [searchP, setSearchP] = useSearchParams();
    // serach 获取参数
    console.log('Dffgg===>>>>>', searchP.get('name'), searchP.get('age'));
    let name = searchP.get('name'),
        age = searchP.get('age');

    return (
        <div>
            <div>useNavigate传参怎么接？</div>
            <div>
                <span>名字：{name}</span>
                <span>年龄：{age}</span>
            </div>
        </div>
    );
};

profile.js

import React from 'react';
import { useParams } from 'react-router-dom';

export default () => {
    // 使用hook useParams获取参数
    const params = useParams();
    // 或者是这种
    const { id } = useParams();

    return (
        <div>
            <div>useNavigate传参怎么接？</div>
            <div>
                <span>第一种方式：{params.id}</span>
            </div>
            <div>
                <span>第二种方式：{id}</span>
            </div>
        </div>
    );
};

settings.js

import React from 'react';
import { useLocation } from 'react-router-dom';

export default () => {
    // 使用hook useLocation获取参数
    const location = useLocation();
    // const { state } = location;
    // 或者是这种
    const { state } = useLocation();

    return (
        <div>
            <div>useNavigate传参怎么接？</div>
            <div>
                <span>第一种方式：{location.state.name}</span>
            </div>
            <div>
                <span>第二种方式：{state.keyWords}</span>
            </div>
        </div>
    );
};