Мое приложение в настоящее время разделено на 3 части:
- Внешний интерфейс
- Администрация
- Ошибка
Внешний интерфейс, администрирование и компонент ошибок имеют собственные стили.
Компонент Frontend и Administration также имеет собственный компонент Switch для навигации по ним.
Проблема, с которой я столкнулся, заключается в том, что я не могу перейти по пути NoMatch без компонента Redirect. Но когда я это делаю, я теряю неправильный путь в URL-адресе браузера.
Есть ли шанс, что у внутреннего компонента Switch нет соответствующего маршрута, который он продолжает искать в своем родительском компоненте Switch?
Тогда я смогу выбрать маршрут NoMatch, а также сохранить неправильный путь в URL-адресе.
Редактировать: я обновил свой ответ ниже, указав окончательное решение, которое работает так, как задумано.
const Frontend = (props) => {
const { match } = props;
return (<div>
<h1>Frontend</h1>
<p><Link to={match.path}>Home</Link></p>
<p><Link to={`${match.path}users`}>Users</Link></p>
<p><Link to="/admin">Admin</Link></p>
<p><Link to={`${match.path}not-found-page`}>404</Link></p>
<hr />
<Switch>
<Route exact path={match.path} component={Home} />
<Route path={`${match.path}users`} component={Users} />
{
// Workaround
}
<Redirect to="/error" />
</Switch>
</div>);
};
const Admin = (props) => {
const { match } = props;
return (<div>
<h1>Admin</h1>
<p><Link to={match.path}>Dashboard</Link></p>
<p><Link to={`${match.path}/users`}>Edit Users</Link></p>
<p><Link to="/">Frontend</Link></p>
<p><Link to={`${match.path}/not-found-page`}>404</Link></p>
<hr />
<Switch>
<Route exact path={match.path} component={Home} />
<Route path={`${match.path}/users`} component={Users} />
{
// Workaround
}
<Redirect to="/error" />
</Switch>
</div>);
};
const ErrorPage = () =>
<div>
<h1>404 not found</h1>
<p><Link to="/">Home</Link></p>
</div>;
const App = () => (
<div>
<AddressBar />
<Switch>
<Route path="/error" component={ErrorPage} />
<Route path="/admin" component={Admin} />
<Route path="/" component={Frontend} />
{
// this should render the error page
// instead of redirecting to /error
}
<Route component={ErrorPage} />
</Switch>
</div>
);
exact
к пути индекса в App.js,<Route exact path="/" component={Frontend} />
. Проблема в том, что он перехватывает все запросы, поэтому ваш маршрут ошибок никогда не отображается. - person hampusohlsson   schedule 06.03.2017exact
к первымRoute
, внутренниеRoute
становятся недоступными. - person datoml   schedule 06.03.2017