为什么我在 <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. 您将了解为什么会出现这些错误。

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

您提出的这个要求非常困难。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组件中，这就是您收到该错误的原因。