在反应中将我的受保护路由分离到不同文件的简单方法答案

【问题标题】：Easy way to separate my protectedroute to different file in react在反应中将我的受保护路由分离到不同文件的简单方法
【发布时间】：2021-06-25 16:56:01
【问题描述】：

我正在寻找一种方法来将我的 protectedroute 与 app.js 分开。在我的代码中一切正常。但是如果模块变得很大，那么 app.js 就很难阅读和管理

我希望将我的受保护路由与某个组件分开，以便它在这里工作得很好。

我的 app.js 现在看起来像这样

import React, { useState } from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useRouteMatch,
    useParams,
    HashRouter,
    BrowserRouter,
    Redirect
  } from "react-router-dom";
import ReactDOM from 'react-dom';
//import useToken from './Routes/UseToken';
import Login from './Login/Login';
import Dashboard from './Dashboard/Dashboard';
import Customer from './Customer/Customer';
import ProtectedRoute from './Routes/ProtectedRoute';

function App() {
    return (
        <>
        {/** use HasRouter but that will make # in the browser */}
        {/*<HashRouter>*/}
        <BrowserRouter basename='/invoice/webapps/'>
            <Switch>
                <Route path="/login"><Login /></Route>
                <ProtectedRoute path="/dashboard"><Dashboard /></ProtectedRoute>
                <ProtectedRoute path="/customer"><Customer/></ProtectedRoute>
                <Route exact path="/"><Redirect exact from="/" to="dashboard" /></Route>
                <Route path="*"><Redirect from="/" to="dashboard" /></Route>
            </Switch>
        </BrowserRouter>
         {/** </HashRouter>*/}
        {/** use HasRouter but that will make # in the browser */}
        </>
    );
}

export default App;

if (document.getElementById('app')) {
    ReactDOM.render(<App />, document.getElementById('app'));
}

我想把这些分开

<ProtectedRoute path="/dashboard"><Dashboard /></ProtectedRoute>
<ProtectedRoute path="/customer"><Customer/></ProtectedRoute>

【问题讨论】：

似乎ProtectedRoute 组件已经与App 组件分离。您能更明确地说明将它们分开是什么意思吗？
大声笑 :) 仔细阅读。如果您阅读我的代码，您可以看到是否有几十个受保护的路由，那么 app.js 对于前端设计师来说变得非常大，所以总是更好地将 app.js 的受保护路由分开，并以某种方式在应用内的组件中调用受保护的路由。 js 看代码很清楚。
Dozens 不是一个大的数字，也不是无法管理的数字，我完全希望任何前端开发人员都能够阅读和维护它们。为什么要抽象出私有路由？它只会增加不必要的代码和复杂性，如果您不注意路由顺序和路径特异性，还可能会破坏 Switch 呈现路由的方式。您会希望将任何特定深度的所有路线一起渲染（很像下面 Lio 的回答）。

标签： reactjs react-router react-hooks

【解决方案1】：

你可以像这样创建一个文件route.js导出和对象

const routes = [
    {component: A, path: '/a'},
    {component: B, path: '/b', isProtected: true}
]

在App.js 中，您可以使用routes.map(route => ()) 来渲染它们。

<BrowserRouter basename='/invoice/webapps/'>
    {routes.map((route, index) => 
       route.isProtected 
         ? <ProtectedRoute path={route.path} key={index}><route.component/></ProtectedRoute> 
         : <Route path={route.path} key={index}><route.component/> </Route>
    }
</BrowserRouter>

可能会有一些语法错误，所以建议你理解我的想法，而不是照搬。

【讨论】：

我今天试试 lio
唯一的语法错误是 route.isProtected ？ ( ) : ()
它可能会错过右花括号。我编辑了
我在检查期间看到一个警告，因为在数组中我们需要密钥。 “警告：列表中的每个孩子都应该有一个唯一的“关键”道具。”
这不是什么大问题，如果你觉得烦，就在我编辑的时候添加key={index}