为什么我在 <Router> 里面渲染之后就在外面？

Question

我正在构建一个 Reactjs 应用程序。我不明白为什么这样做是错误的并导致我出现此错误：

Error: Invariant failed: You should not use <Redirect> outside a <Router>

代码如下：

index.js 中的一个简单路由器

ReactDOM.render(
    <Router>
        <Switch>
            <Route exact path="/" component={(props) => <AppContainer><HomePage {...props}/></AppContainer>}/>
            <Route exact path="/register" component={(props) => <AppContainer><RegisterPage1 {...props}/></AppContainer>}/>
        </Switch>
    </Router>, document.getElementById('root')
);

AppContainer 只是一个带有 id 的简单 div：

export default function AppContainer({children}) {
    return (
        <div id="appContainer">{children}</div>
    );
}

在 RegisterPage1 内部，经过一些处理后，我在“appContainer”上触发了渲染。这应该会在路由器内部渲染一个新组件。

ReactDOM.render(<RegisterPage2 data={res}/>, document.getElementById('appContainer'));

在 RegisterPage2 中，我正在使用，但出现上述错误。

if (redirectHome) return (<Redirect to={"/"}/>)
else {
    return (
//RegisterPage2Components
    )
}

由于我在路由器内部进行渲染，我不明白为什么我可以在 RegisterPage1 中使用 Redirect 而在 RegisterPage2 中不能。我检查了RegisterPage2，路由器仍然在这里（通过在路由器和交换机之间添加一些随机文本）。 如果这样渲染是错误的，不添加新路由的正确方法是什么？

代码沙盒： https://codesandbox.io/s/autumn-leftpad-7s5sy?file=/src/index.js

Answer 1

由于我在路由器内部渲染，我不明白为什么我可以使用 在 RegisterPage1 中重定向，在 RegisterPage2 中不能重定向。

React 开发工具可以在这里为您提供帮助

正如您在图片底部看到的，RegisterPage2 不在路由器组件内。将其与图像的最顶部进行比较，即 React App 被包裹在 BrowserRouter 中。你会明白为什么会出现这些错误。

如果这样渲染是错误的，那么正确的方法是什么 添加新路线？

您提出的这个要求非常困难。如果两个 React 应用程序没有共同的 Router 父级，那么使用 react-router 将很难在它们之间进行遍历。我建议您使用经典的服务器端 http 请求（例如锚标签或 window.href.location），而不是使用单页应用程序技术来开发您正在开发的此功能

Answer 2

这个问题是由这一行引起的

ReactDOM.render(
    <RegisterPage2 data={res}/>,
    document.getElementById('appContainer')
);

这一行应该将RegisterPage2 组件呈现为您的 React 应用程序的 根组件。

在RegisterPage2 中，您正在使用Redirect，假设RegisterPage2 已经有一个父组件，它已经使用了react- router-dom Router 组件。因为它是作为根组件呈现的，而没有在 Router 组件中进行包装，这就是您收到该错误的原因。