пустая страница при обновлении в реагирующем маршрутизаторе

когда я перехожу из /home в /dashboard, маршрутизатор работает нормально, но когда я перехожу из /home в /profile:id, маршрутизатор направляет меня на эту страницу профиля, которая также работает нормально, но когда я обновляю ее, она становится пустой. страницу и не дает мне 404 или перенаправляет обратно на домашнюю страницу, я использую

react-router: "^4.2.0", react-router-dom: "^4.2.2", react-router-redux: "5.0.0-alpha.6",

Итак, как избавиться от пустой страницы, и если URL-адрес находится в /profile/5, а затем при обновлении страницы возвращается на домашнюю страницу или что-то еще, что должно быть уместно, пожалуйста, помогите?

index.js

ReactDOM.render(
 <Provider store={store}>
    <ConnectedRouter history={history}>
        <Switch>
            <Route path="/" component={App} />
            <Route component={Page404} />
        </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app-site')
);

App.js

<Switch>
    <Route path={`/login`} component={LoginMember} />
    <Route path={`/registermember`} component={SignUp} />
    <Authentication component={AuthenticateRoute} />
    <Route component={Page404} />
</Switch>

const AuthenticateRoute = ({ match }) => (
 <Switch>
    <Authentication path={`${match.url}`} component={MainApp} />
    <Route component={Page404} />
 </Switch>
);

Основное приложение

<Switch>                
    <Route path={`/home`} component={Home} />
    <Route path={`/profile/:id`} component={Profile} />
    <Route component={Page404} />
</Switch>

reactjs react-redux react-router router react-router-redux
person tapan dave    schedule 09.03.2018    source источник
comment
В чем бэк-энд? узел, php? Скорее всего, это внутренняя маршрутизация. Когда вы обновляете страницу, вы получаете доступ к своему приложению по маршруту /profile, который серверная часть сначала перехватывает и не знает, как обработать, если вы обработали только корневой uri /.   -  person Raul Rene    schedule 09.03.2018
comment
@raul-reneem я не думаю, что это проблема бэкенда....   -  person tapan dave    schedule 09.03.2018

Ответы (3)


arrow_upward
0
arrow_downward

Из вашего кода,

<Switch>
  <Route path="/" component={App} />
  <Route component={Page404} />
</Switch>

<Route path="/" component={App} /> это приводит к отображению компонента App для каждого маршрута. Таким образом, если вы обновляете страницу, Page404 не будет возможности отобразить его.

Решение :

Поставьте exact вместо /.

<Route exact  path="/" component={App} />
person RIYAJ KHAN    schedule 09.03.2018
comment
да, потому что вы определили любой другой маршрутизатор, кроме этих двух. Итак, если вы попробуете другой, кроме / этих, вы всегда получите 404. - person RIYAJ KHAN; 09.03.2018
comment
см., сначала я отображаю index.js, если нахожу «/», затем он переходит к компоненту «приложение», а в «приложении», если Auth true, затем он передается в MainApp, поэтому, пожалуйста, укажите мне правильный путь, что мне нужно сделать для правильной реализации - person tapan dave; 09.03.2018

arrow_upward
0
arrow_downward

Это связано с тем, что реакция не может найти историю URL-адреса, по которому перемещались пользователи. В основном свойство реакции будет искать URL-адрес, который сохраняется в истории, но здесь разработчик этого не использовал. Чтобы решить эту проблему, выполните следующие три шага. импортировать использование следующим образом: import {useHistory} из react-router-dom; присвойте переменной и используйте этот основной div/маршрутизатор, в который завернуты все компоненты

person MONEYMSN    schedule 29.10.2020

arrow_upward
0
arrow_downward

Я прошел через это, и моя проблема была в package.json, и я указал домашнюю страницу в своем package.json, например:

.
.
"homepage": "http://mywebsite.com/relativepath"
.
.
person Hasan Zahran    schedule 01.11.2020