使用組件反應路由（PageRenderer）

Question

我正在嘗試做的是 React 中的基本路由。 通常我所做的以及我稍后會提到的是使用 element={}。 但目前我想學習和試驗還有哪些其他選項，所以我遇到了插入 function 的組件。 我遵循了一個教程，除了他使用舊版本的路由器 dom 之外我做了完全相同的事情，所以他不使用路由。

這是代碼：

應用程序.js：

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

import Register from './pages/register';
import Login from './pages/login';
import PageRender from './PageRender';

function App() {
  return (
    <Router>
      <input type='checkbox' id='theme'/>
      <div className="App">
        <div className="main"> 
        <Routes> 
          <Route exact path="/:page" component={PageRender}/>
          <Route exact path="/:page/:id" component={PageRender}/>
        </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

PageRender.js：

import React from 'react'
import { useParams } from 'react-router'
import NotFound from './components/NotFound'

const generatePage = (pageName) => {
    const component = () => require(`./pages/${pageName}`).default

    try {
        return React.createElement(component())
    } catch (err) {
        return <NotFound />
    }
}


const PageRender = () => {
    const {page, id} = useParams()
    let pageName = "";

    if(id){
        pageName = `${page}/[id]`
    }else{
        pageName = `${page}`
    }

    return generatePage(pageName)
}

export default PageRender

登錄和注冊 js 只是顯示登錄或注冊的基本箭頭功能（還沒有涉及到那部分）。 我想要做的是，當我輸入 url 時，例如： http://localhost:3000/register 它會將我發送到注冊頁面，如果我輸入錯誤的路徑，它會將我發送到 NotFound 頁面。 但遺憾的是它不起作用。 如果我只是這樣做，我知道解決此問題的方法：

<Route exact path="/login" element={<Login/>}/>

是的，這種方法有效，但目前我正在學習，我很好奇為什么這種方法不起作用。 所以任何有用的提示、技巧和方法都會很棒。 期待聽到您的回復，在此先感謝：D

Answer 1

我能夠讓您的代碼在react-router-dom v5 中運行，訣竅是在App中導入組件一次，以便構建/轉譯它們。 PageRender組件按原樣工作。

RRDv5

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import './pages/register';
import "./pages/login";
import PageRender from "./PageRender";

export default function App() {
  return (
    <Router>
      <input type="checkbox" id="theme" />
      <div className="App">
        <div className="main">
          <Switch>
            <Route path="/:page/:id" component={PageRender} />
            <Route path="/:page" component={PageRender} />
          </Switch>
        </div>
      </div>
    </Router>
  );
}

RRDv6 - 將Switch組件交換為Routes組件，並切換到使用element prop 而不是component prop 將PageRender組件呈現為 JSX。

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

import './pages/register';
import "./pages/login";
import PageRender from "./PageRender";

export default function App() {
  return (
    <Router>
      <input type="checkbox" id="theme" />
      <div className="App">
        <div className="main">
          <Routes>
            <Route path="/:page/:id" element={<PageRender />} />
            <Route path="/:page" element={<PageRender />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}