主页 / 问题 / 1541892
Accepted
TTGL
Asked:2023-09-22 00:52:46 +0000 UTC2023-09-22 00:52:46 +0000 UTC

路线不工作

  • 772

大家好。我想将路径与AppRouter分开放在路由文件中，但它不起作用。告诉我可能是什么问题，我无法弄清楚。 浏览器错误（最后两个） 源文件

应用程序.js

import React from "react";
import { BrowserRouter } from "react-router-dom";
import AppRouter from "./components/UI/AppRouter";
import Navbar from "./components/UI/Navbar/Navbar";
import './styles/app.css';


function App() {
        return (
            <BrowserRouter>
              <Navbar/>
                <AppRouter/>
            </BrowserRouter>
        )
}
          
export default App;

应用路由器

import React from 'react';
import { Navigate, Route, Routes } from "react-router-dom";
import {routes} from "../../router/routes"

const AppRouter = () => {
    return (
        <Routes>
           {routes.map(route => 
                <Route 
                    element={route.element}
                    path={route.path}
                    exact={route.exact}
                />
           )}
         <Route
             path="*"
             element={<Navigate to ='/posts'/>}>
         </Route>
   </Routes>  
    );
};

export default AppRouter;

路线

import About from "../pages/About"
import Posts from "../pages/Posts"
import PostIdPage  from "../pages/PostIdPage"

export const routes = [
    {path: '/about', element: About, exact: true},
    {path: '/posts', element: Posts, exact: true},
    {path: '/posts/:id', element: PostIdPage, exact: true},

]

预先感谢大家的帮助！

javascript

2 个回答

  1. Best Answer

    React 需要一个包含组件中元素索引的键。

    代码示例：

        import ToggleComponent from './components/ToggleComponent'

    function App() {
        const toggleBtn = [
            {name: 'OFF - 1', stateName: 'ON - 1', cont: '123456789'},
            {name: 'OFF - 2', stateName: 'ON - 2', cont: '123456789'},
            {name: 'OFF - 3', stateName: 'ON - 3', cont: '123456789'},
            {name: 'OFF - 4', stateName: 'ON - 4', cont: '123456789'},
        ];

        return <div className='App'>

            {toggleBtn.map((text, index) => {
                return <ToggleComponent 
                                btnName={text.name}
                                btnStateName={text.stateName}
                                content={text.cont} 
                                key={index} />
            })}

        </div>
    }

    export default App
    • 0

  2. 感谢 Dmitry 对索引的帮助。结果我在AppRouter中修复了它

    import React from 'react';
import {Navigate, Route, Routes } from "react-router-dom";
import {routes} from "../../router"

const AppRouter = () => {
    return (
            <Routes>
                {routes.map(route => 
                    <Route 
                        element={route.element}
                        path={route.path}
                        exact={route.exact}
                        key={route.path}
                    />
                )}
                <Route
                    path="*"
                    element={<Navigate to ='/posts'/>}>
                </Route>
            </Routes>  

        
    );
};

    在index.js中我更正了元素

    import About from "../pages/About"
import Posts from "../pages/Posts"
import PostIdPage  from "../pages/PostIdPage"

export const routes = [
    {path: '/about', element: <About/>, exact: true},
    {path: '/posts', element: <Posts/>, exact: true},
    {path: '/posts/:id', element: <PostIdPage/>, exact: true},

]

    一切顺利。

    • 0

相关问题