错误:Router不能被用作jsx组件

Question

这段代码有什么问题?

<Router>
<Route exact path="/">
<Redirect to="/tab" />
</Route>
{loading ? (
<Loader style={{ margin: 100 }} />
) : (
<>
<Route exact path="/privacy" component={Privacy} />
<Route exact path="/termsofuse" component={TermsOfUse} />
<Route exact path="/tab" component={Tab} />
<Route exact path="/config" component={TabConfig} />
</>
)}

</Router>

依赖性"react"^ 16.14.0","react-dom"^ 16.14.0","react-router-dom"^ 5.1.2","react-scripts"^ 5.0.0"}，"devDependencies" {"@types/node":"^ 12.0.0","@types/react":"^ 16.14.6","@types/react-dom":"^ 16.9.12","@types/react-router-dom":"^ 5.1.7","cross-env"^ 7.0.3","env-cmd"^ 10.1.0","typescript"^ 4.1.2"}，"resolutions" {"@types/react":"^ 17.0.2","@types/react-dom":"^ 17.0.2"},

Answer 1

导入所有使用延迟加载的组件，并添加悬念来处理路由错误，如果发生，然后添加悬念加载器代码来处理它

//import your all pages using lazy loading
const Privacy = React.lazy(() => import('./Privacy'));
<Suspense fallback={<Spinner />}>
<Router>
<Route exact path="/">
<Redirect to="/tab" />
</Route>
<Route exact path="/privacy" component={Privacy} />
<Route exact path="/termsofuse" component={TermsOfUse} />
<Route exact path="/tab" component={Tab} />
<Route exact path="/config" component={TabConfig} />
</Router>
</Suspense>