react-router简单使用方式

react-router v6新手使用

在src目录下新建router文件夹，添加index.js文件

import { useRoutes } from 'react-router-dom'
const RouterConfig = () => {
  let Routers = useRoutes([
    {
      path: '/',
      element: <Home />
    },
    {
      path: '*',
      element: <NotFound />
    },
    {
      path: 'home',
      element: <Home />,
      children: [
        {
          path: 'news',
          element: <News />
        }
      ]
    },
    {
      path: 'citylist',
      element: <CityList />
    },
  ])
  return Routers
}

export default RouterConfig

在app.js文件中

import { BrowserRouter } from 'react-router-dom';
import RouterConfig from './router';
function App() {
  return (
    <BrowserRouter>
      <RouterConfig />
    </BrowserRouter>
  );
}

index.js文件

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

如果需要重定向时：

在使用中，重定向遇到问题时（router的index.js中）添加代码块解决：

import { useRoutes, useNavigate } from "react-router-dom";
import { useEffect } from "react";
function Redirect({ to }) {
  let navigate = useNavigate();
  useEffect(() => {
    navigate(to);
  });
  return null;
}
    {
      path: "/",
      // redirectTo:'/discover',
      // element: <XDiscover />,
      element: <Redirect to="/discover" />,
    },

路由跳转(在页面中)：

import { useNavigate } from 'react-router-dom'；
const navigate = useNavigate()
navigate(`${value}`, { replace: false })

获取pathname：

import { useLocation } from 'react-router-dom'
const location = useLocation()
const { pathname } = location