为什么我在 <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 中使用重定向而不能在 RegisterPage2 中使用。我检查了 RegisterPage2，路由器仍然在这里（通过在路由器和交换机之间添加一些随机文本）。如果这样渲染是错误的，那么不添加新路由的正确方法是什么？

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

Answer 1

由于我在路由器内部渲染，我不明白为什么我可以在 RegisterPage1 中使用重定向而不能在 RegisterPage2 中使用。React Dev Tools 可以在这里帮助你正如您在图像底部看到的那样，RegisterPage2它不在 Router 组件内。将它与图像的最顶部进行比较，React App 被包裹在一个BrowserRouter.&nbsp;您将了解为什么会出现这些错误。如果这样渲染是错误的，那么不添加新路由的正确方法是什么？您提出的这个要求非常困难。react-router如果两个 React 应用程序没有共同的 Router 父级，则很难在它们之间遍历。我建议您使用经典的服务器端 http 请求（例如锚标记或window.href.location），而不是为您正在开发的此功能使用单页应用程序技术

Answer 2

这个问题是由这条线引起的ReactDOM.render(&nbsp; &nbsp; <RegisterPage2 data={res}/>,&nbsp; &nbsp; document.getElementById('appContainer'));此行应该将RegisterPage2组件呈现为React 应用程序的根组件。在RegisterPage2你使用的时候Redirect，假设RegisterPage2已经有一个父组件，它已经使用了该react- router-dom Router组件。因为它被渲染为根组件而没有被包装在Router组件中，这就是您收到该错误的原因。