使用组件反应路由（PageRenderer）答案

【问题标题】：React routing using components (PageRenderer)使用组件反应路由（PageRenderer）
【发布时间】：2022-01-12 15:12:47
【问题描述】：

我正在尝试在 React 中进行基本路由。通常我所做的，以及我稍后会提到的，是使用element={<some page>}。但目前我想学习和试验还有哪些其他选项，所以我遇到了插入函数的组件。我遵循了一个教程，并且做了完全相同的操作，只是教程使用了较旧版本的路由器 dom，因此它不使用路由。

代码如下：

App.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/>}/>

这个方法行得通，但是目前我正在学习中，我很好奇为什么这个方法行不通。

【问题讨论】：

第一个 sn-p 中的App 代码真的有效吗？我怀疑它不会因为 react-router-dom v6 Route 组件没有 component 属性。即使您一直仍在使用 RRDv5，您也不想在 component 属性上使用函数，请改用 render 属性。您是否有实际运行的更完整/准确的代码示例？
@DrewReese 是的，该应用程序运行良好，控制台中出现 0 个错误。但是这样做它不会重新路由我想我将不得不使用元素恢复到旧的方式。这是他使用它的教程，是的，它对他有用：youtube.com/watch?v=JGwiXVvPcdk&t=1027s
YouTube 视频的作者似乎使用了react-router-dom v5。在 v6 中，Route 组件不采用 component 或 exact 属性，并且必须被 Routes 组件包裹。如果您的代码在运行中的代码盒中有工作的 RRDv5 版本，我们可以更轻松地测试需要更改哪些内容才能使用 RRDv6。
@DrewReese 刚刚尝试了 RRDv5，是的，如果您希望可以在此处发布您的答案以及如何对 RRDv6 执行类似的解决方案，它可以工作，我会批准您的答案。再次欢呼
我会四处寻找，看看我能在 RRDv6 中得到什么，并在今天晚些时候尝试写一个解决方案。

标签： javascript reactjs routes react-router

【解决方案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 属性而不是component 属性来将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>
  );
}

【讨论】：