React Router не работает и предупреждение. Вы попытались перенаправить на тот же маршрут, на котором находитесь в данный момент: "/" - PullRequest
Новая
       27

React Router не работает и предупреждение. Вы попытались перенаправить на тот же маршрут, на котором находитесь в данный момент: "/"

0 голосов
/ 11 сентября 2018

Я новичок в реагировании на роутер и не могу заставить его работать должным образом.Я создаю SPA, имеющий фрейм с верхним, нижним и нижним колонтитулами, и предполагается, что центральное представление будет меняться в зависимости от выбранного пути.

Верхняя иерархия DOM выглядит следующим образом:

index.js 

render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);

App.jsx 

render() {
    return (
        <div >
            <Router history={history}>
                <div>
                    <PrivateRoute exact path="/" component={DashboardLayout} />
                    <Route path="/#/login" component={LoginForm} />
                </div>
            </Router>
        </div >
    );
}

Dashboard.jsx 

render() {
    if (this.state.toLogin === true) {
        return <Redirect to={{ pathname: '/#/login', state: { from: this.props.location } }} />
    }
    return (
        <div className="app">
            <AppHeader fixed>
                <DefaultHeader/>
            </AppHeader>
            <div className="app-body">
                <AppSidebar fixed display="lg">
                    <AppSidebarHeader />
                    <AppSidebarForm />

                    <AppSidebarFooter />
                    <AppSidebarMinimizer />
                </AppSidebar>
                <main className="main">
                    <Container fluid>
                        <Switch>
                            <Route path="/#/items" name="Items" component={ItemsTable} />
                            <Route path="/#/profile" name="Profile" component={ProfileManager} />
                            <Redirect from="/" to="/#/items" />
                        </Switch>
                    </Container>
                </main>
            </div>
            <AppFooter>
                <DefaultFooter />
            </AppFooter>
        </div>
    );
}

Компонент PrivateRoute просто проверяет, вошел ли пользователь в конечном итогеперенаправление на форму входа в систему.

После входа я ожидаю увидеть в центральном представлении (обернутом контейнером) представление ItemTables, но этого не происходит.

Кроме того, если перейти к / # / items или/ # / вручную (путем ввода пути в браузере или щелчка в пользовательском интерфейсе) центральное представление в контейнере не изменяется.

Я получаю сообщение об ошибке: 

Warning: You tried to redirect to the same route you're currently on: "/"

Все время, и я подозреваю, что это связано.

Наконец, я использую Redux.

Заранее спасибо за вашу помощь.

Я могу предоставить дополнительную информацию, если это необходимо.

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

немного сложнее воспроизвести вашу проблему с данным кодом. если вы можете создать песочницу, которая может быть отличной. Во всяком случае, я создал песочницу с hashrouter. Я хотел бы отметить одну вещь: вам не нужно указывать # на маршрутах.

например 

<Switch>
  <PrivateRoute exact path="/" component={DashboardLayout} />
  <Route path="/#/login" component={LoginForm} />
</Switch>

может быть: 

<Switch>
  <PrivateRoute exact path="/" component={DashboardLayout} />
  <Route path="/login" component={LoginForm} />
</Switch>

хеш используется в качестве ссылки для поиска пути приложения в статических веб-приложениях.

Если вы хотите, вы можете использовать Browserrouter вместо react router

вот рабочий пример, который я разветвлял из другого примера. Я добавил hashrouter в этом и надеюсь, что это поможет вам.

  • пожалуйста, найдите, как <switch> используется, чтобы обернуть каждый маршрут
  • и найдите, как достигается вложенная маршрутизация, такая как реестр, в примере

Ссылка: https://codesandbox.io/s/25okp1mny

ссылка: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

0 голосов
/ 11 сентября 2018

Оберните их в Switch вместо div: 

<Router history={history}>
   <Switch>
      <PrivateRoute exact path="/" component={DashboardLayout} />
      <Route path="/#/login" component={LoginForm} />
    </Switch>
 </Router>

Когда вы перенаправляете по тому же пути с дополнительным #url, необходимо иметь exact path="/". И оно у вас уже есть. Что абсолютно правильно. Убедитесь, что к другим маршрутам также используется точный путь, когда вы перенаправляете на тот же путь, но с дополнительными #hashurl.

Чем Switch отличается от группы маршрутов, просто заключая их в div?

/path, /:alias, /path#hashurl, без реквизита пути будут отображаться все компоненты, поскольку они соответствуют пути расположения.

Но, используя Switch, вы убедитесь, что не включили их все. Просто сопоставьте маршрут, который соответствует пути расположения.

Кроме того, вы используете путь без косой черты, как path="/#/items", и для этого вам необходимо иметь вместе strict и exact.

Пример: 

<Route exact strict strict path="/#/items"

В противном случае вам может понадобиться использовать путь с косой чертой: 

<Route exact path="/#/items/"
...