使用组件进行反应路由（PageRenderer）

Question

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

代码如下：

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，它会把我送到注册页面，如果我输入错误的路径，它会把我送到“未找到”页面。但遗憾的是，它不起作用。我知道我可以解决这个问题，只要我这样做：

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

这个方法可以，但是我正在学习中，很好奇为什么这个方法不行。

Answer 1

我能够让您的代码在 react-router-dom v5 中运行，诀窍是在 App 中导入一次组件，所以它们是 built/transpiled。 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>
  );
}

使用组件进行反应路由（PageRenderer）

React routing using components (PageRenderer)

javascript

routes

reactjs

react-router