IT技术 - React Router v4 不渲染组件 - 吾爱随笔录

React Router v4 渲染组件存在问题。在应用程序的初始加载时，它将呈现与 URL 相对应的正确组件。但是，任何后续Link单击都不会呈现所需的组件。

图书馆

react-router：4.2.2
react：15.6.1
react DOM：15.6.1
-- 只是提到图书馆以防万一-
- react Redux：5.0.6
- 还原：3.7.2
- 材质用户界面：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')
);

应用程序.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 />;
}

布局.jsx

渲染整个应用程序涉及更多的复杂性。Switch在使项目更加module化之前，我将把其他布局组件注释掉，只需要一些链接和一个组件来使其工作。

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>
    );
  }
}

路由.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？我没有收到任何控制台错误或任何告诉我存在问题的信息。因此不确定组件是否未正确包装或可能导致问题的原因。