@ravshan01

Как создать подстраницы react-router-dom?

Всем привет, не знаю как создать подстраницы, использую react-router-dom.

например перехожу в /profile,
а в /profile должны быть переключатель и два компонента /user , /balance-history.
Чтобы полный путь выгляде так /profile/user , /profile/balance-history.

код

class Main extends Component{

	render(){
		return (
			
			<Switch>
		            ...
				<Route path="/profile"    component={Profile} />
			</Switch>

		)
	}

}


function Profile(props){

	let { path, url } = useRouteMatch();

	return(
		<div className="page profile-page">
			
			<LoggedControl noLoggedRedirect={true} />
			<Redirect to={`${url}/user`} />

			<SwitchLinks links={ [

				{
					link   : `${url}/user`,
					text   : 'Кабинет'
				},
				{
					link   : `${url}/balance-history`,
					text   : 'Платежи'
				}

			]}/>

			<Switch>
				<Route path={`${path}/:topic`} component={Control} />
			</Switch>

		</div>
	)

}



function Control(props){
	let { topic } = useParams();

	if ( topic == 'user' ) return <User />
	if ( topic == 'balance-history' ) return <BalanceHistory />
}


Сейчас всё работает, но это как мне кажется не правильно.

И к тому же иногда происходят проблемы :
при прямом переходе например /profile/user ,
в компоненте User не получаю значения из редукс
  • Вопрос задан
  • 229 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы