后退按钮未加载上一个组件答案

【问题标题】：Back button not loading previous component后退按钮未加载上一个组件
【发布时间】：2021-10-02 01:52:43
【问题描述】：

<App /> 中的<Redirect /> 确实从路由器渲染了test，但后退按钮并没有将我带回<App />。

index.js

<Router>
    <Switch>
        <Route path="/documents">
            <>test</>
        </Route>
        <Route path="/">
            <App />
        </Route>
    </Switch>
</Router>

App.tsx

function App() {
    const [isClicked, setIsClicked] = useState(false);

    return (
        <div className="App">
            <GetStarted buttonClicked={setIsClicked} />
            {isClicked && <Redirect from="*" to="/documents" />}
        </div>
    );
}

GetStarted.tsx

function GetStarted(props: Props) {
    return (
        <div
            onClick={(): void => {
                props.buttonClicked(true);
            }}
        >
            CONTINUE
        </div>
    );
}

所以，页面加载，我点击“继续”，我的浏览器 url 栏显示 http://localhost:3000/documents 并正确呈现“测试”。我希望如果我回击，它会再次呈现<App />，但事实并非如此。它停留在http://localhost:3000/documents。

【问题讨论】：

我认为通过将isClicked 的值保持在状态，您的应用程序会立即将您重定向回来。你需要这个状态吗？否则你可以把重定向放在 onClick 处理程序中。
@szaman 我认为这不会发生。 <App /> 根本没有被渲染。当我按下返回时，<App /> 内的控制台日志不会触发。

标签： reactjs react-router

【解决方案1】：

不需要使用<redirect/> 你可以使用<Link/> 例子： here

示例编辑 App.tsx

function App() {
 return (
    <div className="App">
        <GetStarted/>
    </div>
);}

并编辑 GetStarted.tsx

function GetStarted() {
 return (
   <Link to="/documents">
     <div>
        Click and redirect to Test.tsx
     </div>
   </Link>
);}

您可以创建一个视图 Test.tsx 以返回查看 App.tsx

function Test() {
  return (
    <Link to="/">
      <div>
        Click for come in back to App.tsx
      </div>
    </Link>
 );
}

你必须在文件 index.js 中调用她的视图 Test.tsx

<Router>
 <Switch>
    <Route path="/documents">
        <Test />
    </Route>
    <Route path="/">
        <App />
    </Route>
 </Switch>
</Router>

【讨论】：

我必须在我的<GetStarted /> 中使用<Link>，但这有效。谢谢。
完美，我在示例中修复了以供将来帮助