React Router v4不渲染組件

React Router v4渲染組件存在問題。在應用程序初始加載時，它將呈現與URL對應的正確組件。但是，任何後續的Link點擊都不會呈現所需的組件。React Router v4不渲染組件

庫

React Router: 4.2.2
陣營：15.6.1
陣營DOM：15.6.1
- 只提衝擊的情況下，庫 -
- React Redux：5.0.6
- Red UX：3.7.2
- 材質UI：0.19.0

會省略一些imports爲簡潔起見，

網站結構

index.jsx 
    | 
    App.jsx 
    | 
    Auth.jsx 
     | 
     Layout.jsx 
     <Routes />

指數。 jsx

import React from 'react'; 
import store from './store.js'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { BrowserRouter } from 'react-router-dom'; 

import createBrowserHistory from 'history/createBrowserHistory'; 
const history = createBrowserHistory(); 

import App from './containers/App.jsx'; 

ReactDOM.render(
    <Provider store={store}> 
    <MuiThemeProvider muiTheme={muiTheme}> 
     <BrowserRouter> 
     <App /> 
     </BrowserRouter> 
    </MuiThemeProvider> 
    </Provider>, 
    document.getElementById('root') 
);

App.jsx

import React, { Component } from 'react'; 
import Auth from '../components/Auth.jsx'; 

class App extends Component { 
    render() { 
    return <Auth />; 
    } 
}

Auth.jsx

import React from 'react'; 
import { Route } from 'react-router-dom'; 
import Layout from './Layout.jsx'; 

export default function Auth(props) { 
    //this Has a render function to render a Loader, Error Page, or the Layout 
    return <Layout />; 
}

Layout.jsx

還有更多與呈現出整個應用程序在這裏涉及的複雜性。我將把其他佈局組件註釋掉，並且只有一些Links和一個Switch組件才能使項目更加模塊化。

import React, { Component } from 'react'; 
import { Link, Switch, Route } from 'react-router-dom'; 

import Overview from './views/overview/Overview.jsx'; 
import Home from './views/home/Home.jsx'; 

export default class Layout extends Component { 
    render() { 
    return (
     <div className="layout"> 
     {/* <TopBar /> */} 
     {/* <AppBar/> */} 
     {/* <Drawer> 
       <MainMenu/> 
      </Drawer> */} 

      <Link to="/">HOME</Link> 
      <Link to="/overview">Overview</Link> 
      <Switch> 
       <Route path="/" exact component={Home} /> 
       <Route path="/overview" component={Overview} /> 
      </Switch> 

     {/* <Routes /> */} 
     {/* <Footer /> */} 
     </div> 
    ); 
    } 
}

Routes.jsx

這就是我打算路由組件的樣子。

import React from 'react'; 
import { Switch, Route } from 'react-router-dom'; 

import Home from './views/home/Home.jsx'; 
import Overview from './views/overview/Overview.jsx'; 
import Admin from './views/admin/Admin.jsx'; 
import NotFound from './NotFound.jsx'; 

export default function Routes(props) { 
    return (
    <Switch> 
     <Route path="/" exact component={Home} /> 
     <Route path="/overview" component={Overview} /> 
     <Route path="/admin" component={Admin} /> 
     <Route component={NotFound} /> 
    </Switch> 
); 
}

有什麼我不知道讓組件呈現點擊Link？我沒有得到任何控制檯錯誤或任何告訴我有什麼問題。所以不確定組件是否包裝不正確或可能導致問題。

來源

2017-09-01 Full-Hybrid