标签: react-router-dom

我的项目没有出现任何错误，它只是不渲染任何内容。我错过了什么吗？

在 App.js 中，我使用 render props 进行数据传输。

import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Auth from "./views/Auth";
function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route
            path="/login"
            render={props => <Auth {...props} authRoute="login" />}
          />
          <Route
            path="/register"
            render={props => <Auth {...props} authRoute="register" />}
          />
        </Routes>
      </Router>
    </div>
  );
}
export default App;

我在 Auth.js 上获取它，然后检查 props 的值。

import React from "react";
import LoginForm from "../components/auth/LoginForm";
import RegisterForm from "../components/auth/RegisterForm";
const Auth = ({ authRoute …

我正在使用以下路由器配置：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/information" element={<Information />} />
  <Route path="*">
    <Navigate to="/" replace={true} />
  </Route>
</Routes>

每次当我输入路由器无法识别的路线时，我想导航到主路由和主组件。从 v6 开始，没有重定向组件，所以我尝试使用导航。

为什么我的配置不起作用？

我正在使用 vite 和 typescript 制作一个 React 应用程序。当我使用“vite”进行开发时，效果很好。但是当我使用“tsc && vite build”时，@types/react-router-dom和@types/react-router会抛出数百个错误，例如

node_modules/@types/react-router-dom/index.d.ts:13:10 - 错误 TS2305：模块“react-router”没有导出成员“匹配”。

包.json

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/react-router-dom": "^5.3.2",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.3",
    "sass": "^1.43.5",
    "tailwindcss": "^2.2.19",
    "typescript": "^4.5.2",
    "vite": "^2.6.14"
  }
}

React-router-dom 的用法

应用程序.tsx

import React from 'react'
import { BrowserRouter as Router, …

我有三个组件C1、C2、C3映射到路线/c1, /c2/, /c3。

我想阻止组件C3允许（通过浏览器事件处理）返回C2并直接转到C1.

我该如何实现这一目标？

我需要突出显示 React-router v6 中活动的 NavLink。它在文档（https://v5.reactrouter.com/web/api/NavLink）中指出，我们需要停止使用 className 并使用内联样式函数，但我无法正确弄清楚。这是代码沙箱：https://codesandbox.io/s/router-v6-highlight-active-link-c50bo ?file=/src/Home.jsx

基本上，下面的代码显示了文档如何告诉我们如何做到这一点，但它似乎对我不起作用。

          <NavLink 
            to='search' 
            className='navlinkbuttons'
            style={isActive => ({
              color: isActive ? "green" : "blue"
            })}
            >
              Search
          </NavLink>

感谢所有帮助。谢谢！

"/"在路径名称之前有什么区别吗？如果在一种情况下我在"/"从第 1 页导航到第 2 页时使用，我是否应该得到不同的结果：

navigate({
  pathname: 'page2',
  search: `?${createSearchParams({ email: username })}`,
});

而在另一个：

navigate({
  pathname: '/page2',
  search: `?${createSearchParams({ email: username })}`,
});

这两种情况下的新路径名是什么？

 <Link to={{pathname:"/Watch", movie:movie}} >

using this to pass props over Watch page but can't get any value.

我是新手，所以可能会出现愚蠢的错误或信息不足。请让我知道任何额外信息

我已经查看了以下帖子，但仍然遇到了在 React 中使用 useNavigate 进行以下重定向的问题。

反应笑话模拟 useNavigate()

https://github.com/remix-run/react-router/issues/7811

创建帖子片段

const result = await dispatch(postCreateView(postObj))
if(result){
     nav('/posts')
}

测试设置

import {screen, render, fireEvent} from '@testing-library/react'
import { MockComponent } from '../../testMockComponentWrapper'
import { PostCreate } from '../PostCreate'

const mockedUsedNavigate = jest.fn();

jest.mock('react-router-dom', () => ({
    ...jest.requireActual('react-router-dom'),
   useNavigate: () => mockedUsedNavigate,
 }));

describe('Post Create', () => {

    it('successful post with redirect', async () => {
        const {container} = render(<MockComponent><PostCreate/></MockComponent>)
        const titleElement = screen.getByPlaceholderText(/enter title/i)
        const descriptionElement = screen.getByPlaceholderText(/enter description/i)
        const buttonElement = …

我是 React 的绝对大佬，我在 React (v6) 中遇到了一个非常（希望）简单的路由问题。我有：

• 1 导航栏
• 2 个组件

我想使用 React 路线 6 通过“导航栏菜单”访问这两个组件，但我无法修复顶部的导航栏。当我导航到该组件时它就会消失。

我将用图像来解释它：

这是我的配置：

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route path="/" element={<NavBar />} />
          <Route exact path="/componenta" element={<ComponentA />} />
          <Route exact path="/componentb" element={<ComponentB />} />
        </Routes>
      </div>
    </Router>
  );
}

如果你想要在这里你可以找到相关的CodeSandbox：https://codesandbox.io/s/pective-river-5n6go ?file=/src/App.js

如何正确配置路由 (v6) 以使其正常工作？感谢您的帮助。

我想在里面放一个 div<Routes> 并在里面渲染一个<Topbar />和<Sidebar />组件<Routes>而不<Route>为它们添加标签。

我的代码如下：-

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="login" element={<Login />} />
        <Topbar />
        <div className="container">
          <Sidebar />
          <Route path="/" element={<Home />} />
          <Route path="users" element={<UserList />} />
        </div>
      </Routes>
    </Router>
  );
};

我想对所有路线实施<Topbar />和。<Sidebar />但登录页面例外（Topbar并且Sidebar不应显示在登录页面上）。Topbar这就是为什么我将登录路由放在和的顶部Sidebar。

控制台显示错误为：

未捕获错误：[Topbar] 不是组件<Route>。的所有子组件<Routes>必须是<Route>或<React.Fragment>

如何实现这个功能呢？