Nested "Redirect" in React-Router-DOM

Question

我是React JS的新手，现在我正在努力学习如何使用"反应路由器dom"；。这里我有一个非常简单的应用程序，我正在尝试解决一个问题。因此，共有4页(主页/第一页/第二页/第三页，包含项目(我们可以忽略前三个页面，而专注于最后一个页面-第三个页面有项目我们有3件商品。我使用<Redirect />使第一个项目的内容在用户点击第三个页面和项目后立即可见，它似乎工作正常，但存在问题。。。第一次单击第三页的项目时，第一项将按预期显示。但是，如果您仍在Third Page with Items中，并且再次单击它，First Item将消失，您基本上需要重新加载页面或转到另一个页面然后返回。

我的问题是-即使用户连续多次点击Third Page wih Items，我该怎么做才能让第一个项目保持不变？

import React from "react";
import { Route, NavLink, Redirect } from "react-router-dom";
import "./App.css";
const Header = () => {
return (
<ul>
<li>
<NavLink to="/">Main Page</NavLink>
</li>
<li>
<NavLink to="/first">First Page</NavLink>
</li>
<li>
<NavLink to="/second">Second Page</NavLink>
</li>
<li>
<NavLink to="/third-with-items">Third Page wih Items</NavLink>
</li>
</ul>
);
};
const Main = () => <h1>Main Page</h1>;
const First = () => {
return <h3>First Page Content</h3>;
};
const Second = () => {
return <h3>Second Page Content</h3>;
};
const Third = () => {
return (
<div>
<div>
<h3>Third Page Content</h3>
<ul>
<li>
<NavLink to="/third-with-items/item1">First Item</NavLink>
</li>
<li>
<NavLink to="/third-with-items/item2">Second Item</NavLink>
</li>
<li>
<NavLink to="/third-with-items/item3">Third Item</NavLink>
</li>
</ul>
</div>
<Redirect to="/third-with-items/item1" />
<Route path="/third-with-items/item1" component={FirstItem} />
<Route path="/third-with-items/item2" component={SecondItem} />
<Route path="/third-with-items/item3" component={ThirdItem} />
</div>
);
};
const FirstItem = () => (
<div>This text should be shown after you click "Third Page with Items"</div>
);
const SecondItem = () => <div>Something...</div>;
const ThirdItem = () => <div>Another something...</div>;
const App = () => {
return (
<div>
<Header />
<Route exact path="/" component={Main} />
<Route path="/first" component={First} />
<Route path="/second" component={Second} />
<Route path="/third-with-items" component={Third} />
</div>
);
}
export default App;

Answer 1

替换：

<Redirect to="/third-with-items/item1" />

带有：

<Route exact path="/third-with-items" component={FirstItem} />

React Router文档展示了一个嵌套路由的示例，可以帮助您改进组件：

import {BrowserRouter, Route, NavLink, Switch, useRouteMatch} from "react-router-dom";
const Third = () => {
let { path, url } = useRouteMatch();
return (
<div>
<div>
<h3>Third Page Content</h3>
<ul>
<li>
<NavLink to={`${url}/item1`}>First Item</NavLink>
</li>
<li>
<NavLink to={`${url}/item2`}>Second Item</NavLink>
</li>
<li>
<NavLink to={`${url}/item3`}>Third Item</NavLink>
</li>
</ul>
</div>
<Switch>
<Route exact path={path} component={FirstItem} />
<Route path={`${path}/item1`} component={FirstItem} />
<Route path={`${path}/item2`} component={SecondItem} />
<Route path={`${path}/item3`} component={ThirdItem} />
</Switch>
</div>
);
};