Реактивный маршрут не отображается без клика - PullRequest
Новая
       9

Реактивный маршрут не отображается без клика

0 голосов
/ 15 января 2019

Я хочу использовать реагирующий маршрутизатор для навигации по моему приложению. Это электронное настольное приложение, поэтому моя отладка ограничена. Когда происходит вход в систему (который выполняется без маршрутизаторов), отображается компонент с маршрутизатором, но когда отображается этот компонент, он не отображает точный маршрут "/". Только если я нажму на компонент «Ссылка», он появится Я использую BrowserRouter Компонент. У кого-нибудь есть идея?

Это метод визуализации родительских компонентов: 

render() {
    return (
        <Router>
            <div style={styles.text}>
                <AppBar title={this.state.title}/>
                <Grid container className='mainGrid'>
                    <Grid item>
                        <Route exact path="/" component={Feed} />
                    </Grid>
                </Grid>
                <BottomNav/>
                <Sidenav/>
            </div>
        </Router>
    );
}

То есть метод рендеринга BottomNav: 

render() {
    const {value} = this.state;
    return (
        <BottomNavigation className='BottomNav' showLabels value={value}
                          onChange={this.handleChange}>
            <BottomNavigationAction component={Link} to="/" label="Feed" icon={<BookIcon/>}/>
            <BottomNavigationAction component={Link} to="/calendar" label="Calendar" icon={<CalendarIcon/>}/>
            <BottomNavigationAction component={Link} to="/mail" label="Mail" icon={<MailIcon/>}/>
            <BottomNavigationAction component={Link} to="/tickets" label="Tickets" icon={<AssignmentIcon/>}/>
        </BottomNavigation>)
}

И это метод рендеринга компонентов Feed: 

render(){
    return(
        <h1>Hallo Welt (Feed)</h1>
    )
}

Если вам нужна дополнительная информация, пожалуйста, напишите комментарий.

1 Ответ

0 голосов
/ 15 января 2019

Вам не хватает окружающего компонента Switch , который автоматически отображает первый маршрут, который соответствует. 

<Switch>
  <Route exact path="/" component={Feed} />
</Switch>

Редактировать

Кажется, что исходный маршрут вашего местоположения - пустая строка, а не /. Я никогда не сталкивался с таким поведением, так что это может быть связано с сервером?

Я могу думать об этих двух решениях:

Добавить перенаправление

Добавьте <Redirect from="" to="/" /> в ваш App.jsx. Это вызовет косую черту на вашем пути.

Отключить строгий режим Route

React router добавил опору exact для проблем с косой чертой. Хотя я не уверен на 100%, что это сработает в вашем примере.

<Route exact path="/" component={Feed} exact={false} />

...