小编Dre*_*ese的帖子

我正在尝试遵循 MUI 的Mini 变体抽屉中给出的示例，使左侧ListItemButton能够与 React Router v6 的 Link 元素一起使用。该文档对于如何使用路由器库实现这一目标不是很清楚。我尝试了几种变体但无法使其工作。MUI 的 CodeSandBox 链接位于此处。有人可以告诉我如何启用ListItemButton像这样的路径/my-path吗？

我正在使用react-router v6，是否可以在不使用Outlet组件的情况下使用嵌套路由？

例如：我有一个用户页面和 onClick 用户组件，它应该导航到特定的用户页面，

当前尝试：

 <Routes>
   <Route path="/" element={<Home />} />
   <Route path="/users" element={<Users />} />
     <Route path=":id" element={<UserPage/>} />
 </Routes>

然后单击特定用户：

const gotoUserPage = () => {
  navigate('1')
}

gotoUserPage 将 URL 从“/users”更改为“/users/1”，但 userPage 组件不会呈现。

我希望你们一切都好。最近我用react做了一个项目，并在这里制作了一个示例。问题出在路由上。我想在其父路由下显示子路由，但不幸的是我没有成功。如果有人可以解释问题或修复代码，我将非常感激。

应用程序

import "./styles.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./Login";
import Main from "./Main";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/main" element={<Main />}></Route>
        </Routes>
      </Router>
    </div>
  );
}

主要的

import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Outlet,
  Link
} from "react-router-dom";
import Child1 from "./Child1";
import Child2 from "./Child2";

export default function Main() {
  return …

我正在使用 React 重建我的个人网站，并决定使用最新版本的 react-router-dom，我正在构建我的App组件来包含导航栏，然后在我想要显示的内容下面，例如Home或Projects。这在我的路线上工作得很好/projects，但我似乎无法弄清楚如何在索引路线上渲染App和。Home有办法吗？这是我到目前为止所拥有的：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
// N.B. Routes replaces Switch as of V6

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        // Using <App/> here keeps the navbar but doesn't display the homepage content
        <Route path="/" element={<App/>}>
        // But using <Home/> loses the navbar
        // Should I have my Navbar …

我找不到罪魁祸首在哪里。我尝试调试它，但找不到真正导致这些错误的原因：

无法读取 null 的属性（读取“useContext”）&&react.development.js:209 警告：无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本

应用程序.js

function App() {
  return (  
    <React.Fragment> 
      <Counter/>
    </React.Fragment> 
  );
}
        
export default App;

索引.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider context={StoreContext} store={Store()}>
    <App />
  </Provider>
);
          
reportWebVitals();
    

CounterReducer.js

const CounterReducer = (state = { count: 0 } , action) => {
  switch (action.type) {
    case handleDencrement:
      return state.count - 1 
            
    case handleIncrement:
      return state.count + 1
    
    default:
      return state
  } 
}
     
export default …

我试图在导航到 ReactJS Web 应用程序中的其他路线或页面之前显示未保存更改的对话框。我尝试了 Stackoverflow 的不同解决方案，但没有成功。大多数解决方案与旧版本相关。我需要版本6.0.2 (react-router-dom)。任何能在这方面帮助我的人都非常感激。

据我现在的理解，如果我们传递一个Outletwith 上下文，上下文之后的 props 可以传递到 child 中，而outlet 充当模板，将这些 props 传递到路由器可能渲染的任何子代中。

我的问题是，如果我们只是<Outlet />在没有上下文的情况下设置怎么办？如果它没有通过任何props，我们有什么理由特别想<Outlet />单独使用呢？

代码可能如下所示

索引.js

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="checkout" element={<Checkout />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

应用程序.js

function App() {
  return (
    <>
      <Reset />
      <GlobalStyle />
      <Header cartItems={cartItems} />
      <Outlet />
    </>
  )
}

如何使用react-router-dom v6在react中创建路由？

目前我正在尝试：

<Route path="/registration:id" element={<Registration />} />

当 url 为“http://localhost:3000/registration?code=testCode”时，我收到错误：

No routes matched location "/registration?code=testCode

我尝试过以多种不同的方式操作路由路径，唯一有效的方法是路径没有查询部分“：id”。

这是 v6 的新语法还是我做错了什么？

我无法将“Switch”或“Routes”与react router（特别是react-router-dom）一起使用。因为对于使用哪一个，交换机还是路由似乎有点混乱，所以我决定尝试两者来尝试到达某个地方。

"react-router-dom": "^6.2.1",

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

import { BrowserRouter as Router, Route, Switch} from 'react-router-dom'

"name": "@types/react-router",
"version": "5.1.17",