标签: react-router-dom

这是代码截图。

我想渲染Homepage组件，但我想将其包装到这些MainLayout组件中。

问题是屏幕是空白的，终端中没有错误，但是当我检查页面时，它显示“位置“/”处的匹配叶路由没有元素”，所以我知道这是版本更新语法问题，因为我我在写作时遇到了同样的问题，component= {component }但语法已经改变，我应该写element={<component />}。

所以我相信这也是语法问题，但我已经做过研究但无法解决。我相信我应该改变这一点

/* ... */ render = {() => (
  <MainLayout>
    <Homepage />
  </MainLayout>
)}

有点新的语法，但不知道如何。

我有以下链接：

<NavLink to={x.url} className={(x) = x.isActive ? 'active' : 'not-active' } >
    <img src={`icon-default.svg`} /> // change from default.svg to active.svg       
    Link Text
</NavLink>

img我的图标位于 HTML 而不是 CSS 中，我想根据 isActive 调用不同的 img，是否可以在子元素（标签）上执行此操作？

react-router-dom": "^6.0.2"

谢谢

我正在学习 Colt Steele 的 React 课程。遗憾的是，该课程已经过时，因此我选择自己迁移到最新版本的库。

说到这里，我现在面临这个错误，我无法使用功能组件中的 useParams 挂钩提取 URL 参数。我将我的代码粘贴在下面供社区检查。

应用程序.js

import Palette from './Palette';
import seedPalettes from './assets/seedPalettes'
import './css/App.css'
import { generatePalette } from './assets/colorHelpers';
import { Routes, Route, Link, useParams } from 'react-router-dom';

function App() {

  const { id } = useParams()
  const findPalette = id => {
    return seedPalettes.find(function (palette) {
      return palette.id == id;
    })
  }

  console.log(id);

  return (
    <div className='App'>
      <Routes>
        <Route path='/' element={<h1>Welcome Home</h1>} />
        <Route path='/palette/:id' element={<Palette palette={generatePalette(findPalette(id))} />} />
      </Routes> …

我有两个导航菜单，菜单栏上的艺术家和专辑。我正在使用react_rotuer_dom v6

这是嵌套的导航结构。

1. 单击艺术家（将显示艺术家列表）/艺术家
2. 单击艺术家（将显示专辑列表）/artists/artist/xxx
3. 单击专辑（将显示曲目列表。/artists/artist/xxx/album/yyy
4. 单击轨道（显示歌词）。/艺术家/艺术家/xxx/专辑/yyy/track/zzz

到目前为止，我的嵌套路线正在按预期工作。现在我想从曲目（4）返回到专辑（3）。有一个链接相册可导航回相册。那么我如何从“跟踪”页面导航此路径 /artists/artist/xxx/album/yyy 。我可以给出绝对路径 /artists/artist/xxx/album/yyy，它正在工作。

但是如果我单击“相册”路线怎么办？我对专辑、专辑和曲目使用相同的页面。请看下面我的死记硬背。我是否使用正确的嵌套路线方法？

小路

const paths = {
  home: "/",

  artists: "/artists",
  getArtists: () => `/artists`,
  artist: "artist/:artistId",
  getArtist : (artistId) => `artist/${artistId}`,

  albums: "/albums",
  getAlbums: () => `/albums`,
  album: "album/:albumId",
  getAlbum: (albumId) => `album/${albumId}`,

  track: "track/:trackId",
  getTrack: (trackId) => `track/${trackId}`,
};

export default paths;

路线

<Routes>
    <Route path={paths.home} element={<HomePage />}></Route>

    <Route path={paths.artists}>
      <Route index element={<ArtistsPage />} />
      <Route path={paths.artist}>
        <Route index element={<AlbumsPage />} />
        <Route path={paths.album}>
          <Route index element={<AlbumPage />} …

以下React路由代码可能在React Router v5中工作，但在React Router v6中给出以下错误

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

是否可以更新路由/路由代码，以便它在 React Router v6 中工作？

function App() {
  // Some stuff here...

  const { players, offlinePlayers } = usePlayers();


  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
        <BrowserRouter>

            <Routes>
                <Route path="/" element={<Home />} />

                <Route path="/players">
                {players.map((player) => {
                    return (
                    <Route exact key={player.name} path={`/players/${player.name}`}>
                        <Player player={player} />
                    </Route>
                    );
                })}
                </Route>
            </Routes>  

        </BrowserRouter>
    </ThemeProvider>
  )

}

<Router />尝试将 React Router V6 与 typescript 一起使用，但是在添加路由时，我在组件上遇到类型错误。它说传递给路由器的孩子属性的类型不正确，但我只是使用了库提供的组件。

我的代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Router, Route } from 'react-router-dom';

// Styles
import './css/index.css';

// Pages Directory
import * as Pages from './pages';

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

root.render(
    <React.StrictMode>
        <BrowserRouter>
            <Router>
                <Route path="/" element={<Pages.Home />} />
                <Route path="about" element={<Pages.About />} />
            </Router>
        </BrowserRouter>
    </React.StrictMode>
);

错误：

ERROR in src/index.tsx:18:5
TS2739: Type '{ children: Element[]; }' is missing the following properties …

以下是我的进口：

import React, { useState } from "react";
import { HashRouter as Router, Routes, Route, Link, useLocation} from "react-router-dom";
import './App.css';
import Home from "./components/Home";
import About from './components/About';
import Works from "./components/Works";
import Contact from "./components/Contact";

下面是应用程序组件：

function App() {
  window.document.body.style.background = "url('images/bg-image-3.png') no-repeat center center fixed";
  window.document.body.style.backgroundSize = "cover";

  const location = useLocation();

  return (
    <Router>
      <div className="App">
        <Routes location={location} key={location.pathname}>
          <Route path='/' element={ <Home/> }/>
          <Route path='/about' element={ <About/> }/>
          <Route path='/works' element={ <Works/> }/>
          <Route path='/contact' …

我开始使用带有 Module Federation Plugin 的微前端。现在我在应用程序之间构建路由时面临一些问题。我的主机应用程序有路线 3 mfe 应用程序。他们每个人的内部都有自己的路由。Host-app 中的导航正常工作，就像内部导航一样，但是当我在 hostApp/app1/somePage1 上再次单击导航到 hostApp/app1 时，它仍然呈现 hostApp/app1/somePage1。您可以推荐什么架构？我如何控制它？现在我使用react-router-dom V6，但我想构建应用程序，以便明天我可以添加另一个库，例如 Angular-router 或 bla-bla-bla-Router，而无需对主机进行任何更改

export default function HostApp() {
 return (
  <BrowserRouter>
     <div>Hello, I'm the host app!</div>
     <NavLink to='/app1'> <button> app1 </button> </NavLink>
     <NavLink to='/app2'> <button> app1 </button> </NavLink>
     <NavLink to='/app3'> <button> app1 </button> </NavLink>
     <Routes>
       <Route path='/' element={
          <Suspense fallback={'Loading'}><div>home page container</div></Suspense>} />
       <Route path='app1/*' element={ 
          <Suspense fallback={'Loading'}> <MfeApp1/></Suspense>}/>
       <Route path='app2/*' element={ 
          <Suspense fallback={'Loading'}> <MfeApp2/></Suspense>}/>
       <Route path='app3/*' element={ 
          <Suspense fallback={'Loading'}> <MfeApp3/></Suspense>}/>
    </Routes>
  </BrowserRouter>
)}

Mfe应用程序： …

function NavigationLink({ to, title, exactPath, Icon }) {
  const resolved = useResolvedPath(to);
  const match = useMatch({
    path: resolved.pathname,
    end: exactPath,
  });
  const [active, setActive] = useState(false);

  return (
    <StyledNavLink linkSelected={match}>
      <NavLink
        to={to}
        style={({ isActive }) =>
          isActive ? setActive(true) : setActive(false)
        }
      >
        <Title>{title}</Title>
        <SelectedContainerIcon active={active}>
          <Icon />
        </SelectedContainerIcon>
      </NavLink>
    </StyledNavLink>
  );
}

现在我正在使用它，使用“isActive”来更改状态，然后传递给子组件（以更改图标的背景颜色），但它给了我一个渲染错误（尽管实际上运行良好）。有没有办法将“isActive”直接传递给孩子？

我希望能够监听查询参数更改事件，最好是通过钩子，但任何事情都很好。我找不到任何表明它甚至可以使用react-router的东西，所以也欢迎其他没有它的建议。