React Router v4 不渲染组件 [英] React Router v4 not rendering components

问题描述

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

图书馆

• 反应路由器:4.2.2
• 反应:15.6.1
• 反应 DOM:15.6.1
• -- 仅提及库以防受到影响-
  • React Redux:5.0.6
  • Redux:3.7.2
  • 材质界面:0.19.0

为了简洁起见，将省略一些imports

网站结构

index.jsx|应用程序.jsx|身份验证.jsx|布局.jsx<路线/>

index.jsx

从'react'导入React；从'./store.js'导入商店；从 'react-dom' 导入 ReactDOM；从'react-redux'导入{提供者}；从'react-router-dom'导入{ BrowserRouter}；从'history/createBrowserHistory'导入createBrowserHistory；const 历史 = createBrowserHistory();从'./containers/App.jsx'导入应用程序；ReactDOM.render(<提供者商店={商店}><MuiThemeProvider muiTheme={muiTheme}><浏览器路由器><应用程序/></BrowserRouter></MuiThemeProvider></提供者>,document.getElementById('root'));

App.jsx

import React, { Component } from 'react';从'../components/Auth.jsx'导入身份验证；类 App 扩展组件 {使成为() {返回 <Auth/>;}}

Auth.jsx

从'react'导入React；从'react-router-dom'导入{路由}；从'./Layout.jsx'导入布局；导出默认函数 Auth(props) {//this 有一个渲染函数来渲染加载器、错误页面或布局返回<布局/>;}

Layout.jsx

渲染整个应用程序更复杂.在使项目更加模块化之前，我将把其他布局组件注释掉，只留下一些链接和一个 Switch 组件来使其工作.

import React, { Component } from 'react';从'react-router-dom'导入{链接，交换机，路由}；从'./views/overview/Overview.jsx'导入概览；从'./views/home/Home.jsx'导入首页；导出默认类布局扩展组件{使成为() {返回 (<div className="布局">{/* <TopBar/>*/}{/* <AppBar/>*/}{/* <抽屉><主菜单/></抽屉>*/}<Link to="/">主页</Link><Link to="/overview">概览</Link><开关><Route path="/" 精确组件={Home}/><Route path="/overview" component={Overview}/></开关>{/* <路由/>*/}{/* <页脚/>*/}

);}}

Routes.jsx

这就是我想要的路由组件的样子.

从'react'导入React；从'react-router-dom'导入{开关，路由}；从'./views/home/Home.jsx'导入首页；从'./views/overview/Overview.jsx'导入概览；从./views/admin/Admin.jsx"导入管理员；从 './NotFound.jsx' 导入 NotFound；导出默认功能路由(道具){返回 (<开关><Route path="/" 精确组件={Home}/><Route path="/overview" component={Overview}/><Route path="/admin" component={Admin}/><路由组件={NotFound}/></开关>);}

我是否缺少让组件呈现点击Link 的东西?我没有收到任何控制台错误或任何告诉我存在问题的信息.因此不确定组件是否未正确包装或可能导致问题的原因.

解决方案

看起来发生的事情是 Redux 集成阻止了更新.

需要:

import {withRouter} from 'react-router-dom';

导出默认 withRouter(connect(mapStateToProps, mapDispatchToProps)(App))'

文档

Having an issue with React Router v4 rendering components. On initial load of the application it will render the correct component corresponding to the URL However, any subsequent Link clicks will not render the desired component.

Libraries

• React Router: 4.2.2
• React: 15.6.1
• React DOM: 15.6.1
• -- just to mention libraries in case of impact --
  • React Redux: 5.0.6
  • Redux: 3.7.2
  • Material UI: 0.19.0

Going to omit some imports for sake of brevity

Site Structure

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

index.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

There's more complexity involved here with rendering out the entire application. I'm going to leave the other layout components commented out and just have some Links and a Switch component to get that working before making items more modular.

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

This is what I'm intending the routes components to look like.

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

Is there something I'm missing to get components to render clicking Link? I'm not getting any console errors or anything telling me there's an issue. So not sure if components are not wrapped correctly or what may be causing the issue.

解决方案

Looks like what was happening is that with Redux integrations was blocking updates.

Need to:

import {withRouter} from 'react-router-dom';

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))'

Documentation

这篇关于React Router v4 不渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！