标签: react-router-dom

您好，我正在尝试使用 React Router 将项目更新到 v6。我了解了基础知识，但在相关链接方面遇到了困难。

我们有一个页面，通过“id”呈现给定项目的参考文档。该文档可以使用同级 ID 链接到其他“同级”材料。换句话说，用户可以在文档中导航，而无需离开相同的基本路线（由“id”参数化）。

我在codesandbox上做了一些重现，下面是基本代码。

import React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useParams
} from "react-router-dom";

import "./styles.css";

function GenericPage() {
  const { id } = useParams();
  return (
    <div className="page">
      <p>Document id: {id}</p>
      <div>
        Links from within page don't work:
        <Link to="./foo" className="link">
          Foo
        </Link>
        <Link to="./bar" className="link">
          Bar
        </Link>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <div>
        Working top nav:
        <Link to="docs/generic/foo" className="link">
          Foo …

我已经setSearchParams在 Parent 组件中使用了 hook，它query根据inputJSX 元素的输入进行设置。现在，我需要实现第二个搜索参数 = sortBy，但不要删除已经存在的query搜索参数，或者可能是我每次执行 If() 检查时需要执行的现有搜索参数。而且我现在还需要 if() 检查父元素的参数sortBy。我可能会在不同的 React 组件中引入更多的搜索参数 - 这会让代码变得混乱。

有没有更好的方法来使用 React Router 6 处理分散在项目中的多个搜索参数？

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

const titles = ['Name', 'Sex', 'Born', 'Died', 'Father', 'Mother', 'Slug'];

export const TableHead = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const query = searchParams.get('query');

  return (
    <tr className="person">
      {
        titles.map(el => (
          <th
            key={el}
            onClick={() => {
              if (query) {
                setSearchParams({ …

我正在使用react v18和react-router-dom v6.4.1创建一个应用程序，其中我使用createBrowserRouter文档中显示的功能（https://reactrouter.com/en/main/start/tutorial#adding- a-路由器）。div但是，即使仅配置一个简单的根路由（返回一个简单的“Hello World！”），它也根本不起作用。在里面。

这是我使用的代码和我得到的错误。我有什么遗漏的吗？

import { createBrowserRouter } from 'react-router-dom'

const router = createBrowserRouter([
  {
    path: '/',
    element: <div>Hello World!</div>
  }
])

export default router

我正在使用react-roter-dom v 6.4.2。我想在我的主页中使用 useLoaderData，如下所示：

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

const Home = () => {
  try {
    const user = useLoaderData();
    console.log(user);
  } catch (error) {
    console.log(error);
  }
  return (
    <div>
      <h2>This is Home</h2>
    </div>
  );
}

export default Home;

我在 Route 组件中使用 loader，如下所示：

import logo from './logo.svg';
import './App.css';
import { Route, Routes } from 'react-router-dom';
import About from './components/About';
import Products from './components/Products';
import Header from './components/Header';
import Home from './components/Home';

function App() …

我对此很陌生，当我使用 V6.4.3 时，我发现它更新为似乎使用加载程序进行身份验证，因此我尝试简化原始方法。但是当我使用 时useLoaderData()，我变得未定义。

索引.js

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="sign-in" element={<SignIn />} />    
      <Route path="/" element={<App />} errorElement={<LayoutError />}>
      <Route
        path="data"
        loader={() => { AuthProvider() }}
        element={<DataLayout />}
      />
      <Route path="about" element={<About />} />
      </Route>
    </>
));
ReactDOM.createRoot(document.getElementById('root'))
  .render(
    <ThemeProvider theme={theme}>
      <RouterProvider router={router} />
    </ThemeProvider>
  );

AuthProvider.js

export default function AuthProvider(){
  //{token: '4r8gjifendinsd'}
  const user = authService.getCurrentUser();
  //{"token":"asdasdasd"}
  console.log(JSON.stringify(user));
  if (!user.token) {
    throw redirect("/sign-in");
  }
  return user;
}

数据布局.js

export default function DataLayout() {
  const …

我有一个侧边栏菜单可以更改页面

我发现如果我单击当前路径的菜单项，页面将不会触发重新渲染。

（例如当前路径是 /user 并单击相同的路径 /user ）

进入页面时它会调用 useEffect 来获取数据，但我想再次单击相同的链接来重新加载数据而不是重新加载页面

我有以下 React 路由器。

 <Routes>
   <Route path="" element={<MainLayout />}>
     <Route path="/user" element={<User />} />
     <Route path="/contact" element={<Contact />} />
     <Route exact path="/" element={<Login />} />
   </Route>
</Routes>

MainLayout.jsx

<Layout>
      <Sidebar />
      <Layout>
        <Header></Header>

        <Content >
          <Outlet />
        </Content>

        <Footer >
           Sorftware
        </Footer>
      </Layout>
</Layout>

侧边栏.jsx

<Menu>
  <Menu.Item key="users" >
     <Link to="/user">User</Link>
  </Menu.Item>
</Menu>

*更新：我删除了index.js， CustomRouter.jsx因为它似乎与我的问题无关

当我输入一个不存在的 url 时，我试图呈现一个组件。但是，该组件会在所有路由中保持渲染。我正在使用react-router-dom@4.1.1. 这是我设置的路线：

import * as React from "react";
import { Route, RouteComponentProps } from "react-router-dom";
import glamorous from "glamorous";
import ElementList from "./elementlist";
import AddElement from "./addelement";
import NotFound from "./NotFound";

const Styling = glamorous.div({
  minHeight: 5,
  minWidth: 8
});

const NavRouter = () => (
  <Styling>
    <Route path="/" exact={true} component={ElementList} />
    <Route path="/addelement" component={(props: 
       RouteComponentProps<{}>) => (
         <AddElement onSubmitSuccess={() => props.history.push("/")} />
       )} />
    <Route path="*" exact={true} component={NotFound}/>
  </Styling>
);

export default NavRouter;

这是我的NotFound …

我是React的新手，我已经<Link>从dy数据中转到下一个或上一个项目（例如，如果我在user / 2视图上，则上一个链接转到user / 1，下一个链接转到user / 3 ），则正确更改了url，但根本没有呈现该组件，也根本没有重新加载数据。

我读到这是由于组件未检测到子代未更改状态，因此父组件未呈现。

我尝试使用，withRouter但出现错误：You should not use <Route> or withRouter() outside a <Router>如果有人有解决方案并对此有一些解释，我不明白我在做什么，我将不胜感激:)

App.js：

import React, { Component } from 'react';
import {
  Route,
  Switch,
  withRouter,
} from 'react-router-dom';


import HomePage from './pages/home';
import SinglePage from './pages/single';

class App extends Component {



  render() {


    return (
      <Switch>
        <div>
          <Route exact path="/" component={HomePage} />
          <Route path="/:id" component={SinglePage} />
        </div>
      </Switch>
    );
  }
}

export default withRouter(App);

Single.js：

import React, …

因此，我尝试在注销页面和重定向到主网站页面之间进行一些延迟。但是，我陷入了问题，该反应路由器-DOM <Redirect/>方法并不想火的时候，我们把它里面setTimeout()的setInterval()。

因此，如果我们将其从计时器中解开，<Redirect/>它将正常工作。

问题是什么，有什么建议吗？

我的代码：

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import axios from 'axios';

class LogoutPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false
        }
    }

    componentDidMount(e) {
        axios.get('http://localhost:3016/logout')
        .then(
            this.setState({
                navigate: true
            }),
        )
        .catch(err => {
            console.error(err);
        });

        if (this.state.navigate) {
            setTimeout(() => {
                return <Redirect to="/employers" />
            }, 2000);
        }
    };

    render() {
        if (this.state.navigate) {
            setTimeout(() => …

我正在学习反应，因此我开始使用styled-components和react-router dom

但是我面临困难，无法将自定义样式的组件应用于我自己创建的现有组件。

这是代码：

import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";

const NavStyle = styled.div`
  color: red;
  margin: 10px;
`;

const Navigation = () => {
  return (
    <div>
      <NavStyle>
        <NavLink to="/">Home</NavLink>
      </NavStyle>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/contact">Contact</NavLink>
    </div>
  );
};

export default Navigation;

问题是color: red没有应用，但是margin: 10px在视图中应用了。这样吗