亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么我在 <Router> 內部渲染后在外面?

為什么我在 <Router> 內部渲染后在外面?

桃花長相依 2023-03-03 10:35:19
我正在構建一個 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
查看完整描述

2 回答

?
Smart貓小萌

TA貢獻1911條經驗 獲得超7個贊

由于我在路由器內部渲染,我不明白為什么我可以在 RegisterPage1 中使用重定向而不能在 RegisterPage2 中使用。

React Dev Tools 可以在這里幫助你

http://img1.sycdn.imooc.com//64015d1500015aa104980860.jpg

正如您在圖像底部看到的那樣,RegisterPage2它不在 Router 組件內。將它與圖像的最頂部進行比較,React App 被包裹在一個BrowserRouter. 您將了解為什么會出現這些錯誤。

如果這樣渲染是錯誤的,那么不添加新路由的正確方法是什么?

您提出的這個要求非常困難。react-router如果兩個 React 應用程序沒有共同的 Router 父級,則很難在它們之間遍歷。我建議您使用經典的服務器端 http 請求(例如錨標記或window.href.location),而不是為您正在開發的此功能使用單頁應用程序技術


查看完整回答
反對 回復 2023-03-03
?
烙印99

TA貢獻1829條經驗 獲得超13個贊

這個問題是由這條線引起的


ReactDOM.render(

    <RegisterPage2 data={res}/>,

    document.getElementById('appContainer')

);

此行應該將RegisterPage2組件呈現為React 應用程序的根組件。


在RegisterPage2你使用的時候Redirect,假設RegisterPage2已經有一個父組件,它已經使用了該react- router-dom Router組件。因為它被渲染為根組件而沒有被包裝在Router組件中,這就是您收到該錯誤的原因。


查看完整回答
反對 回復 2023-03-03
  • 2 回答
  • 0 關注
  • 112 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號