React Typescript - изменение загруженного компонента по умолчанию

Question

Здравствуйте, я использую эту библиотеку в качестве стартового набора для своего проекта: https://github.com/VelinGeorgiev/spfx-react-router/tree/02e829ef432fc1f02e4fdaa7a7da6b54a2fe0b7e (Я использовал эту версию, а не более новую.

Проблема I ' m по умолчанию пытается загрузить несуществующий компонент 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>
        );      
    
    }

Я не совсем уверен, какая страница в этой библиотеке сообщает проекту, к какому компоненту направить в первую очередь. Прямо сейчас, когда я go в своем приложении, экран пустой, пока я не нажму на любой из них. screen1 или screen2 из списка ul.

Answer 1

Вы можете изменить <App/> с index.ts на <screen1/> или использовать history.pu sh ("/ screen1") из react-router history при запуске

Answer 2

Вы должны определить домашний маршрут. Примерно так:

<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" />} />

Надеюсь, это будет полезно.