没有路由匹配的位置 "/"反应路由器 v6

Question

我在控制台中收到这条消息，我试图在元素上添加index属性，但没有呈现元素。这个问题在journalRoutes上，但我看不出有什么问题。

JournalRoutes.jsx:

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import { JournalPage } from '../pages/JournalPage'
export const JournalRoutes = () => {
  return (
   <Routes>
    <Route path="/" index element={<JournalPage/>}/>
    <Route path='*' element={<JournalPage/>}/>
   </Routes>
  )
}

AppRouter.jsx:

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import {AuthRoutes} from "../auth/routes/AuthRoutes"
import { JournalRoutes } from '../journal/routes/JournalRoutes'
export const AppRouter = () => {
  return (
    <Routes>
        <Route path='/auth/*' element={<AuthRoutes/>}/>
        <Route path='/journal' element={<JournalRoutes/>}/>
    </Routes>
  )
}

JournalApp.jsx:

import React from "react";
import { AppRouter } from "./router/AppRouter";
import { AppTheme } from "./theme/AppTheme";
export const JournalApp = () => {
  return (
    <AppTheme>
      <AppRouter/>
    </AppTheme>
  );
};

Main.jsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { JournalApp } from './JournalApp'
import { BrowserRouter} from "react-router-dom"
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
    <JournalApp />
    </BrowserRouter>
  </React.StrictMode>
)

Answer 1

问题出现在AppRouter渲染根Routes组件中。它没有渲染任何"/"路径。JournalRoutes中的"/"路由路径是相对于Route渲染JournalRoutes的"/journal"路由路径而构建的。

您只需要在应用程序中的"/"上呈现一条路由。它可以呈现任何内容，包括重定向到"/journal"；主页"；。

示例：

import React from 'react';
import { Route, Routes, Navigate } from 'react-router-dom';
import { AuthRoutes } from "../auth/routes/AuthRoutes";
import { JournalRoutes } from '../journal/routes/JournalRoutes';
export const AppRouter = () => {
  return (
    <Routes>
      <Route path='/auth/*' element={<AuthRoutes />} />
      <Route path='/journal/*' element={<JournalRoutes />} />
      <Route path="/" element={<Navigate to="/journal" />} /> // <-- path "/"
    </Routes>
  );
};

此外，虽然path和index都是可选道具，但您通常不希望同时指定两者。拆下其中一个。

Exmaple:

export const JournalRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<JournalPage />} />
      <Route path='*' element={<JournalPage />} />
    </Routes>
  );
};

或

export const JournalRoutes = () => {
  return (
    <Routes>
      <Route index element={<JournalPage />} />
      <Route path='*' element={<JournalPage />} />
    </Routes>
  );
};

Answer 2

我认为你可以去掉JournalRoutes，并在你的AppRouter中完成这项工作，而不是

 <Routes>
    <Route path='/auth/*' element={<AuthRoutes/>}/>
    <Route path='/journal'>
         <Route index element={<JournalRoutes/>}/>
         // this will route to /journal/sample but you should use Outlet to show nested routes in v6
         <Route path='sample' element={<Sample/>}/>
         <Route path='*' element={<NotFound/>}/>
     </Route>
</Routes>

Answer 3

我认为你可以这样组织你的路线：

import React from 'react'
import { Route, Routes, Outlet } from 'react-router-dom'
import {AuthRoutes} from "../auth/routes/AuthRoutes"
import { JournalRoutes } from '../journal/routes/JournalRoutes'
export const AppRouter = () => {
  return (
    <Routes>
      <Route path="/" element={<div>Add whatever you want at / route here</div>}/>
      <Route path='/auth/*' element={<AuthRoutes/>}/>
      <Route path='/journal' element={<Outlet/>}>
        <Route index element={<JournalPage/>}/>
        <Route path='*' element={<JournalPage/>}/>
      </Route>
    </Routes>
  )
}