Как сделать сложный routing в react?

Question

[Юра Комаров]

Я только изучаю reac и у меня вопрос по react-router-dom. Я даже не знаю как это описать.
У нас есть главная страница с меню и контентом под каждый пункт меню. Это сделать просто. Я обернул в приложение и в контенте я пишу Route и показываю ту страницу по которой мы кликнули в меню.
Я решил добавить кнопку sign in в header и мне хочется что бы мое приложение работало так:
path="/" - показываем все приложение
path="/sign-in" - показываем только страницу входа на сайт ( что бы не было ни header ни меню)
path="/news - показываем приложение header menu и раздел новости.

С тем что path="/" and path="/news" я все понимаю как оно работает. Вот только не могу понять как в эту схему роутинга встроить страницу с path="/sign-in" , что бы при этом пути показывалась только ее содержание (без header(a)). Заранее спасибо.

Comments

[Илья Герасимов]

Думаю у вас как-то так:

<div>
  <header />
  <Switch><Route /></Switch>
  <footer />
</div>

Составьте архитектуру без layout'a. Как-то так:


Внутри каждого page контейнера рендерим то, что нужно на странице.

[Юра Комаров]

Решение вроде, как то что нужно. Вот только перестали работать внутренние ссылки в компоненте.
Т.е. мы переходим в компонент App отображается меню. Но при клики на меню при path="/news" пустой экран.
https://codepen.io/Yurajun/pen/RqRRGV
Хоть код и не работает в codepen Возможно визуальной оценки хватит сказать что не так в нем.
На домашней машине код работает и я вижу страницу регистрации и главную по отдельности. Вот только на главной не могу шагать дальше в глубь по меню.

Answer 1

[Юра Комаров]

Спасибо за совет. Мне не помогло это решение.
A как делают такие вещи. Может есть простое универсальное решение описанное где то (пример). Или все делают вот так (пример) и ни кто не парится. Думаю мне для начала хватит и какой то стандартной заготовки. Если не сложно, то посоветуйте что нибудь, какое нибудь такое решение которое вы используете в 80 % случаев.

Comments

[Антон Спирин]

Почему не помогло-то?

Если не сложно, то посоветуйте что нибудь, какое нибудь такое решение которое вы используете в 80 % случаев.

Тут все зависит от задач. Универсального решения нет.

[Юра Комаров]

В таком варианте при клике на SingIn у меня оба компонента отображаются.

const Content = match => {
	console.log(match);
	return (
		<div className="content">
			<Route component={Home} path="/" />
			<Route component={NewsPage} path="/news" />
		</div>
	);
};

const Header = () => (
	<div className="header">
			<div className="registration-box">
				<Link className="btn sign-in" to="/sign-in">
					Sign in
				</Link>
			</div>
		</div>
		<div className="nav">
			<nav className="main-nav">
				<NavLink activeClassName="active" exact to="/">
					Главная
				</NavLink>
				<NavLink to="/news">Новости</NavLink>
			</nav>
		</div>
	</div>
);

const App = () => (
	<MainLayout>
		<Header />
		<Content />
	</MainLayout>
);

const MainLayout = ({children}) => {
	console.log(children);
	return <div className="wrapper-app">{children}</div>;
};

ReactDOM.render(
	<Router>
		<div className="">
			<Route component={App} path="/" />
			<Route component={SignIn} path="/sign-in" />
		</div>
	</Router>,
	document.querySelector('.root'),
);

В таком, при клике на SignIn . Компонент Sign In не отображается хотя пусть localhost:3000/sign-in
Сейчас вижу только компонент App

ReactDOM.render(
	<Router>
		<div className="">
			<Switch>
				<Route component={App} path="/" />
				<Route component={SignIn} path="/sign-in" />
			</Switch>
		</div>
	</Router>,
	document.querySelector('.root'),
);

Если сделать так то не могу попасть на внутренние страницы, но зато могу видеть Sing In и Главную страницу по отдельности на разных путях.

ReactDOM.render(
	<Router>
		<div className="">
			<Switch>
				<Route component={App} exact path="/" />
				<Route component={SignIn} exact path="/sign-in" />
			</Switch>
		</div>
	</Router>,
	document.querySelector('.root'),
);

[Антон Спирин]

Юра Комаров, так вы все неправильно делаете.
Первый вариант - совсем не то, что я описал в ответе. Смотрите внимательно.
Второй можно исправить так:

ReactDOM.render(
  <Router>
    <div className="">
      <Switch>
        <Route component={SignIn} exact path="/sign-in" />
        <Route component={App} />
      </Switch>
    </div>
  </Router>,
  document.querySelector('.root'),

[Юра Комаров]

Ура, заработало ) Спасибо. Я бы не в жизнь не догадался бы )

Answer 2

[Антон Спирин]

Как вариант решения, написать компонент-контейнер MainLayout:

const MainLayout = ({ children }) => (
  <Wrapper>
    <Header />
    <Content>
      {children}
    </Content>
    <Footer />
  </Wrapper>
);

В компоненте App:

<Switch>
  <Route exact path="/" component={Main} />
  {/* остальные роуты */}
</Switch>

В pages/Main и остальные страницы с хедером и футером:

const Main = () => (
  <MainLayout>
    {/* тут содержимое страницы */}
  </MainLayout>
);