React Typescript-更改默认加载的组件

Question

你好，我在这里使用这个库作为我的项目的入门工具包：https://github.com/VelinGeorgiev/spfx-react-router/tree/02e829ef432fc1f02e4fdaa7a7da6b54a2fe0b7e(我使用的是这个版本，而不是更新的版本

我遇到的问题是，默认情况下，它正在尝试加载不存在的Home组件。默认情况下，我希望应用程序路由到Screen1组件。

以下是我的Webapp.tsx的样子：

import * as React from 'react';
import { HashRouter as Router, Route } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { Screen1 } from './Screen1';
import { Screen2 } from './Screen 2'; 
export default class Webapp extends React.Component<IWebappProps, {}> {


public render(): React.ReactElement<IWebappProps> {
return (
<Router>

<ul>
<li><Link to="/" >Home</Link></li>
<li><Link to="/screen1" >screen1</Link></li>
<li><Link to="/screen2" >screen2</Link></li>
</ul>

<Route path="/screen1" render={() => <Screen1/>} />
<Route path="/screen2" component={screen2} />

</Router>
);      

}

我不太确定这个库中的哪个页面告诉项目要首先路由到哪个组件。现在，当我打开我的应用程序时，屏幕是空白的，直到我从ul列表中单击屏幕1或屏幕2。

Answer 1

您必须定义回家路线。像这样：

<Route path="/" exact component={Home} />
<Route path="/screen1" render={() => <Screen1/>} />
<Route path="/screen2" component={screen2} />

如果你想将默认路由设置为/screen1，你可以使用这个：

<Route path="/screen1" render={() => <Screen1/>} />
<Route path="/screen2" component={screen2} />
<Route path="/" exact render={() => <Redirect to="/screen1" />} />

希望这会有用。

Answer 2

您可以将<App/>从index.ts更改为<screen1/>或者在启动上使用来自react-router history的历史推送("/screen1"(