在页面重新加载 react-router-dom v5 时重定向到“/”

【问题标题】：Redirect to '/' on page reload react-router-dom v5在页面重新加载 react-router-dom v5 时重定向到“/”
【发布时间】：2021-07-06 14:43:15
【问题描述】：

如何让 react-router-dom 在我重新加载时转到我的应用的根页面？

有些帖子说要使用 exact 关键字，但这不起作用。

例子：

import React, { useEffect } from 'react';
import { Route, Switch} from "react-router-dom";

const Component = () => {

    return (
      <div id="app">
         <Switch>
            <Route exact path="/" component={ExampleComponent} />
            <Route path="/example_route_1" component={ExampleComponent1} />
            <Route path="/example_route_2" component={ExampleComponent2} />
            <Route path="/example_route_3" component={ExampleComponent3} />
            <Route path='*'>404</Route>
         </Switch>
      </div>
    )
}

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

要在重新加载时路由回/，只需使用useEffect() 推送到历史记录，确保在末尾添加空数组，使其只运行一次。

这将推送根路径（或您在useEffect() 中推送的任何路径），无论用户在重新加载之前位于何处。

例子：

import React, { useEffect } from 'react';
import { Route, Switch, useHistory } from "react-router-dom";

const Component = () => {

    const history = useHistory();
        
    useEffect(() => {
      history.push("/");
    }, []);

    return (
      <div id="app">
         <Switch>
            <Route exact path="/" component={ExampleComponent} />
            <Route path="/example_route_1" component={ExampleComponent1} />
            <Route path="/example_route_2" component={ExampleComponent2} />
            <Route path="/example_route_3" component={ExampleComponent3} />
            <Route path='*'>404</Route>
         </Switch>
      </div>
    )
}

【讨论】：