Как сделать многостраничный и макетный (или) контейнер с помощью React Router?
Я делаю панель инструментов, используя React Router v4. У меня есть такие страницы, как «Зарегистрироваться», «Войти», «Добавить и перечислить продукты», «Добавить и перечислить клиентов».
Страницы аутентификации, страницы регистрации и входа имеют свои собственные макеты, нет, верхний или нижний колонтитул или навигационное меню. Остальные имеют одинаковый дизайн макета с заголовком, навигационным меню и нижним колонтитулом.
Я пробовал это:
// App.tsx
return (
<Router>
<Route exact path = "/" component = {Layout}>
<Route exact path = "/" component = {Status} />
<Route path = "/welcome" component = {Welcome} />
</Route>
<Route path = "/signup" component = {SignUp} />
<Route path = "/signin" component = {SignIn} />
</Router>
);
// Layout.tsx
return (
<React.Fragment>
<Header lastName = "Wahaha" />
<Navbar />
{children}
<Footer description = "Thanks for visiting!" />
</React.Fragment>
);
<Header />, <Navbar /> и <Footer /> не появились.
Взял ссылку отсюда: Использование нескольких макетов для компонентов react-router но у меня не работает.
Пожалуйста помоги.
Ответы 1
В своих проектах я использую для создания конкретных маршрутов, чтобы справиться с этим. Например, у меня есть RouteAuthenticated, RouteUnauthenticated, RouteAdmin...
// RouteAuthenticated
import { Redirect, Route } from 'react-router-dom';
class RouteAuthenticated extends React.Component<Props, State> {
constructor(props) {
super(props);
this.state = {
isAuthenticated: false,
loading: true,
};
}
async componentDidMount() {
const isAuthenticated = CHECK IF IS AUTHENTICATED
this.setState({
isAuthenticated,
loading: false,
});
}
render() {
const { component: Component, ...rest } = this.props;
const { isAuthenticated, loading } = this.state;
const renderRoute = props =>
isAuthenticated === true ? (
<Layout>
<Component {...props} />
</Layout>
) : (
<Redirect to = "/signup" />
);
return loading ? null : <Route {...rest} render = {renderRoute} />;
}
}
export default RouteAuthenticated;
Таким образом, я забочусь об упаковке и аутентификации в одном компоненте.
В App.tsx
// App.tsx
return (
<Switch>
<RouteAuthenticated exact path = "/" component = {Status} />
<RouteAuthenticated path = "/welcome" component = {Welcome} />
<RouteUnauthenticated path = "/signup" component = {SignUp} /> // or <Route path = "/signup" component = {SignUp} />
<RouteUnauthenticated path = "/signin" component = {SignIn} /> // or <Route path = "/signin" component = {SignIn} />
</Switch>
);
Оно работает!!!!!!!!!!!!!!!! Спасибо! Не могли бы вы немного объяснить в const { component: Component, ...rest } = this.props; и <Component {...props} />, пожалуйста?
Здорово! const { component: Component, ...rest } = this.props; относится к реквизитам, которые RouteAuthenticated получают (т. е. exact, path), пересылают rest в <Route {...rest} render = {renderRoute} /> и обрабатывают component отдельно. <Component {...props} /> относится к компоненту, который будет передан <Route {...rest} render = {renderRoute} /> через метод render, как описано здесь (til.hashrocket.com/posts/…)
Нужно будет увидеть компонент верхнего и нижнего колонтитула, чтобы увидеть, что должно быть отображено.