从 '/' 重定向和 '/anything' 在反应路由器中有什么区别？

Question

如果用户的状态有更新，我正在尝试将用户从/重定向到/info。 如果重定向是必要的，/anything/data，计算同一组件，则一切正常，该组件位于/下，但如果重定向是从/进行的，而不是从/home进行的，则它会失败，并保留在同一组件上。因此，<Redirect to={'/info'} />下面的线是可见的。 这有什么区别，我可以简单地从/重定向吗？

这些是纯功能组件，除了标记外，不包含其他内容。 应用组件：

function App() {
return <div className={'app'}>
<PerfectScroll>
<main className={'contentArea'}>
<Router history={history}>
<Route exact path={'/'} component={Select} />
<Route path={'/home'} component={Select} />
<Route path={'/info'} component={Info} />
<Route path={'/summary'} component={Summary} />
<Route path={'/thank-you'} component={() => <h1>Thanks</h1>} />
<Redirect from={'*'} to={'/'} />
</Router>
</main>
</PerfectScroll>
</div>
}

选择组件： 从/重定向时，我可以看到"嘿"

function Select {
return <>
<Redirect to={{pathname: '/info'}} push/>
<h1>Hey</h1>
</>
}

浏览器历史记录：

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
export default history;

Answer 1

无需使用重定向，只需在路径中添加多个路由即可

例：

<Route exact path={["/","/pathName"]} component={yourComponentName} />

更新如果您希望在找不到路由的情况下重定向工作，那么您需要这样做

<Route path="*" component={Select} />

Answer 2

我已经在代码沙箱上实现了您的示例，我唯一更改的是选择用 React 片段 (<></>( 包装的组件，因为它工作不稳定。切换组件检查第一个子项，片段可能会破坏它。

function Select() {
return <Redirect to={{ pathname: "/info" }} push />;
}

如果我理解你的逻辑，它应该在这里工作。 检查代码 ： https://codesandbox.io/s/react-router-8obur?file=/index.js