标签: react-router-dom

我正在使用 React Router 6.4.3 和新的数据路由器。

第三方身份验证库通过挂钩公开身份验证上下文和登录函数，例如：

const { AuthenticationContext, login } = useAuthentication();

我已经设法AuthenticationContext通过使用 中的无路径路由将路由包装到 中createBrowserRouter。

但是，我无法理解如何利用路由操作来执行登录并随后重定向用户。由于配置和操作现在位于功能组件之外，因此我无法使用该useAuthentication钩子。

我的配置如下：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { AuthProvider } from 'auth';
import Login, { action as loginAction } from './routes/login';

const router = createBrowserRouter([
    {
        element: <AuthProvider />,
        children: [
            {
                path: '/login',
                element: <Login />,
                action: loginAction,
            },
        ],
    },
]);

function App() {
    return (
        <RouterProvider router={router} />
    );
}

目前loginAction …

我有以下组件作为主要布局。当我单击菜单项时，我希望它们导航到主页、假日日历和活动页面。我可以用这个水平菜单做什么？下面的代码显示了围绕上述页面的主要布局。我正在使用 AntD 和反应路由器。这个主要布局围绕着所有其他路由器。

import { Layout, Menu, Button, Avatar, Row, Col, Space, Dropdown } from "antd";
import React, { useState } from "react";
import { Outlet } from "react-router-dom";

const navigation = [
  { label: "Home", key: 1 },
  { label: "Holiday Calendar", key: 2 },
  { label: "Event", key: 3 },
];

const MainLayout = () => {

  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
    window.dispatchEvent(new …

任何大型应用程序都会有可能需要路由器重定向用户的一般上下文。由于RouterProvider只能在根级别使用。如何将它与应用程序上下文一起使用。

例如，ApiContext如果用户无权访问 API，我会重定向到 403 路由/组件。

如何将此上下文包装在 中，而RouterProvider不必在每次路由更改时重新渲染它。换句话说。我怎样才能拥有使用路由器的父上下文？

如果我使用 ，它工作得很好BrowserRouter，但在 v6.8 中卸载之前使用任何类型的提示的唯一方法是使用数据 api 和方法createBrowserRouter。

标题导航也是如此。我不希望我的标头出现在每个路由组件和路由的一部分中。我希望我的标头是静态的，而路由组件是动态的。

// Aplication Context
export const ApiContext = React.createContext({});

export const ApiProvider = memo((p: { children: React.ReactNode; }) => {
  const navigate = useNavigate();
  const [token, setToken] = useState<string>()

  if (!token) {
    navigate('/403');
  }

  const value = useMemo(() => ({}), []);
  return (
    <ApiContext.Provider value={value}>
      {p.children}
    </ApiContext.Provider>
  );
});

// Index
const router = createBrowserRouter([
  {
    path: …

我有一个react + django + webpack的项目。我在我的上定义了路线App.js

<NavBar />
<Router>
  <Routes>
    <Route exact path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Router>

Links我在我的组件中定义NavBar.js：

import React from "react";
import { Link } from "react-router-dom";

export default function NavBar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

如果我Link在其中使用App.js它可以正常工作，但是当我在组件中使用它时NavBar.js我会收到此错误：

网络包配置：

<NavBar />
<Router>
  <Routes>
    <Route exact path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Router>

我Switch也尝试使用，但它只能使用超链接 …

自 v5 以来，我一直在使用 的redirect方法react-router-dom，但现在它不起作用。我尝试过useNavigate钩子，但无法通过useParams钩子获取参数。它只是不会对路由中定义的组件进行任何重定向。我的应用程序是使用创建的create-react-app。这是我的配置：

索引.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
reportWebVitals();

应用程序.js

import './App.css';
import { Route, Routes } from 'react-router-dom';
import Person from './entities/person/Person';
import UpdatePerson from './entities/person/UpdatePerson';

function App() {
  return (
    <Routes>
      <Route path='/' element={<Person />} …

我在redux应用程序中使用react-router-dom.

这是我在index.js中的初始设置:

ReactDOM.render(

  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>

  , document.getElementById('root'));

然后在我的App.js中我有:

render() {
    return (
      <div className="App">
        <Route exact path="/" render={ () => {
          return (
              <div>
                {
                  this.props.categories.map((category)=>{
                    console.log('category', category)
                    return (
                          <Link key={category.name} to="/category"  >{category.name}</Link>
                    )
                  })
                }
              </div>
          )

          }}
        />

        <Route path="/category" render={ () => {
          console.log('category path this.props', this.props)
          return (<p>Category is whatever</p>)
        }}
        />

      </div>
    );
  }

我认为每当我点击显示的任何链接时,浏览器会自动知道如何呈现新的路径路径/类别,但由于某种原因它不会.

我究竟做错了什么？

我正在使用React-router-dom开发一个React应用程序。

componentWillUnmount(){
    clearInterval(this.chartChangeId);
}