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