javascript - 使用组件 react 路由(PageRenderer)

Question

我正在尝试在 React 中进行基本路由。通常我所做的，以及我稍后会提到的，是使用 element={<some page>} .但目前我想学习和试验还有哪些其他选项，所以我遇到了插入函数的组件。我遵循了一个教程，并且做了完全相同的操作，只是教程使用了较旧版本的路由器 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 只是显示登录或注册的基本箭头功能(还没有涉及到那部分)。我想要做的是当我输入网址时，例如:http://localhost:3000/register，它会将我发送到注册页面，如果我输入错误的路径，它会将我发送到“未找到”页面.但遗憾的是，它不起作用。我知道如果我只是这样做，我可以解决这个问题:

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

这种方法有效，但目前我正在学习中，我很好奇为什么这种方法不起作用。

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渲染 PageRender 的 Prop 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>
  );
}