دمتین هستم
3 ماه پیش توسط دمتین هستم مطرح شد
2 پاسخ

مشکل گرفتن پارامتر URL داخل React

سلام رفقا ، داخل اپ ری اکتیم ، از ساختار پایین برای تنظیم روت استفاده میکنم کار نمیکنه
<Route path='/@:string' element={<ShowString/>} />
یعنی وقتی داخل URL بزنم
localhost:3000/@123
اون کامپوننت ShowString رو بر نمیگردونه و روت های دیفالت بالاتر رو برمیگردونه
روشی هست که بشه چنین حالت روتی رو تنظیم کرد؟


ثبت پرسش جدید
حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 3 ماه پیش مطرح شد
1

درود از چه ورژنی از react-router-dom دارید استفاده میکنید ترجیحا ورژن ۶باشه
اینم یه نمونه کد برای پیاده کردن چنین چیزی

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import ShowString from './ShowString';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/@:string" element={<ShowString />} />
        {/* سایر روت ها */}
      </Routes>
    </Router>
  );
}

export default App;

دمتین هستم
تخصص : برنامه نویس
@thematin 3 ماه پیش آپدیت شد
0

سلام مجدد حسام جان ، مرسی از راهنماییت
بخوام بگم ، کد من ساده شدش اینه

ایندکس :

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes,Route } from 'react-router-dom';
import Home from "./pages/home.js";
import Layout from "./pages/layout.js";
import ShowString from "./pages/showstring.js";
import AboutMe from './pages/aboutme.js';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route index element={<Home />} />
          <Route path='about-me' element={<AboutMe />} />
          <Route path='*' element={<Home />} />
        </Route>
        <Route path='/@:string' element={<ShowString />} />
      </Routes>
    </BrowserRouter>
  );
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />)

 تصویر

عکس بالا کلا Layout و حالت عادی صفحه اصلیه

 تصویر

این عکس بالا هم یکی از صفحاته که Layout رعایت شده فقط کانتنت صفحه عوض میشه

اما مشکل من دقیق اینجاست

 تصویر

اینجا وقتی روت localhost:3000/@hello رو میزنم Layout با حالت صفحه عادی رو لود میکنه و اصلا اون روت رو فراخوانی نمیکنه

const ShowString = () => {

    console.log(2);

    return (
      <>
      <h2>Wow! , @ Route!</h2>

      </>
    );
  };

  export default ShowString;

اینم کد ساده صفحه ShowString که فقط ثابت کنه بارگذاری شده ، یه لاگ تو کنسول بده که اونم نمیده

نسخه react-router-dom هم 6.24.1 هستش

@hesammousavi


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام