Я работаю над динамической веб-страницей, используя React. Я использую компонент Switch из React Routers, чтобы переходить с домашней страницы на другие страницы по мере необходимости. Я хочу, чтобы следующая учетная запись создала новую учетную запись:
Домашняя страница >> страница входа >> Создать учетную запись (1)> (2)> (3) >> вернуться на страницу входа или на главную страницу
На словах: пользователь должен иметь возможность перейти с домашней страницы на страницу входа, со страницы входа на страницу создания учетной записи с тремя шагами (каждый из которых является уникальным компонентом) и с третьего шага вернуться на домашнюю страницу.
Моя проблема заключается в том, чтобы вернуться с третьей страницы создания учетной записи обратно на главную страницу или страницу входа. Я могу создавать ссылки, которые возвращают меня со страницы 1> 2, 2> 1, 2> 3 или 3> 2. Но я не могу заставить страницу 3 отобразить ссылку, которая вернет меня домой.
Первоначально на моей странице создания учетной записи был оператор switch, отображающий три отдельных компонента. Если я установлю маршрут home внутри этого оператора switch, div отобразит Home внутри него, как и ожидалось. Если я просто опущу маршрут, страница не будет отображаться, когда я нажму на ссылку, но у нее будет правильный путь, потому что она будет загружаться правильно при обновлении.
Я также попробовал:
Перемещение маршрутизатора, чтобы ограничить весь компонент, а не только компонент Switch.
Перемещение маршрута к дому, прежде чем что-либо еще в документе, - как и ожидалось, это просто отображало домашнюю страницу над страницей создания учетной записи после активации маршрута.
Использование Redirect внутри и снаружи оператора Switch.
Действительно неприятный метод рендеринга внутри div значения ключа «component» изнутри объекта и ручного обновления значений в этом объекте при щелчке по ссылкам, вместо использования чего-либо даже смутно связанного с React Routers. Это сработало лучше, чем следовало, но не идеально.
** В качестве своего рода примечания мне сказали (хотя у меня нет личного опыта), что у Vue есть «шаговый», который можно использовать для навигации по страницам 1, 2 и 3, чтобы избежать использования вложенный роутер вообще. Есть ли такая вещь в React или React-Routers?
Приложение:
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/Login" component={Login} />
<Route path="/CreateAccount" component={CreateAccount} />
<Route path="/Account_Recovery" component={Recovery} />
<Route path="/RR_One" component={RR_One} />
</Switch>
</Router>
);
}
Страница создания учетной записи в том виде, в каком она существует сейчас:
class CreateAccount extends React.Component {
render() {
return (
<Router>
<PageHeader pageTitle="Create a Free Account"/>
<div className="pageBody">
<div className="centerHalf">
<Route path="/CreateAccount/1" component={PageOne} />
<Route path="/CreateAccount/2" component={PageTwo} />
<Route path="/CreateAccount/3" component={PageThree} />
</div>
<p>Paragraph outside of the changing div.</p>
</div>
</Router>
)}};
Пример компонента PageThree (остальные пока похожи, просто связаны между собой):
class PageThree extends React.Component {
render() {
return (
<div>
<p>Page Three</p>
<Link to={{pathname: "/CreateAccount/2"}}>Go to page 2</Link> <br />
<Link to={{pathname: "/Login"}}>Complete</Link>
</div>
)}};