反應路由器子嵌套組件失敗

我usinf react/redux，我試圖讓路由工作。這是一場災難。我遇到了幾乎所有可以找到並且沒有正確解決方案的錯誤/問題。反應路由器子嵌套組件失敗

我index.js看起來是這樣的：

const store = createStore(
    rootReducer, 
    applyMiddleware(thunk, promise) 
); 

const history = syncHistoryWithStore(createBrowserHistory(), store) 

ReactDOM.render(
    <Provider store={store}> 
     <MuiThemeProvider> 
      <Router history={history}> 
       <Switch> 
        <Route exact path="/" component={LoginPage}/> 
        <Route component={UserLayout}> 
         <Route exact path="/user/dashboard" component={UserDashboardPage} /> 
         <Route exact path="/user/users" component={UserUsersPage} /> 
        </Route> 
       </Switch> 
      </Router> 
     </MuiThemeProvider> 
    </Provider>, 
    document.getElementById('root') 
);

我首先有一個地方現在交換機是和沒有工作。沒有交換機，我得到一個錯誤，說路由器可能只有1個孩子。

我想要一個使用SimpleLayout的登錄頁面，我希望使用SimpleLayout和子佈局UserLayout的2個URL的用戶儀表板和用戶用戶。

我該如何做到這一點？順便說一下我做訪問的URL如/用戶/儀表板或/＃/用戶/儀表板

來源

2017-07-10 Martijn Hiemstra

您使用的是react-router的哪個版本？請注意，版本4與版本3和更早版本有根本的不同。就目前而言，它看起來像你有兩者兼而有之。 – Chris

您正在嘗試以react-router v3結構的形式使用react-router的v4語法。您應該創建UserLayout內UserLayout的一部分的子路由，而不是在您的應用程序級別。 –

我認爲這個答案會幫助你https://stackoverflow.com/questions/44434041/nesting-routes-and-dynamically-routing-in-react-router-v4/44434648#44434648 –

我現在有這樣的：

<Provider store={store}> 
    <MuiThemeProvider> 
     <BrowserRouter history={history}> 
      <SimpleLayout> 
       <Route exact path="/login" component={LoginPage}/> 
       <Route path="/user"> 
        <UserLayout> 
         <Route exact path="/user/dashboard" component={UserDashboardPage} /> 
        </UserLayout> 
       </Route> 
      </SimpleLayout> 
     </BrowserRouter> 
    </MuiThemeProvider> 
</Provider>

我改變路徑= 「/」爲路徑= 「/登錄」。現在/ login和/＃/ login不起作用。

UserLayout也始終可見，即使它只應在訪問以/ user開頭的url時纔可見。

來源

2017-07-10 08:35:13

請考慮不要回答你自己的問題在澄清的情況下。相反，編輯它。 – Larce

我試過，但是，stackoverflow不允許長評論，因此我只能把我的反應在這裏。 –

我不是故意寫評論。您也可以在提交後編輯您的問題。一個問題需要解決一個問題。我會編輯你的問題，然後在評論中寫下「我改編了這個問題......」 – Larce

你index.jsx應該包含這個BrowserRouter內：

<Route exact path="/login" component={LoginPage}/> 
    <Route path="/user" component={UserLayout}/>

而且裏面UserLayout：

<Route exact path={`${this.props.match.url}/dashboard} component={UserDashboardPage}/>

陣營，路由器V4允許您定義的飛行路線，當你需要他們，而不是在更高/配置級別。

我不確定SimpleLayout在您的應用程序中的地位。

來源

2017-07-10 10:23:23

反應路由器子嵌套組件失敗

回答

相關問題