React-роутер рендерит компонент при обновлении браузера - PullRequest
Новая
       38

React-роутер рендерит компонент при обновлении браузера

1 голос
/ 30 мая 2019

Я работаю с реагировать-маршрутизатор и реагировать-md.Моя проблема заключается в том, что когда я меняю URL через ссылки, компоненты не отображаются.Если я нажму F5 работает.Мой код такой:

Verions 

    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0"

App.js 

import React, { Component } from 'react';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      sidebarVisible: false
    };
  }

  render() {
    const { sidebarVisible } = this.state;

    return (
      <div>
        <Header showDrawer={this.showDrawer} />
        <Sidebar handleVisibility={this.handleVisibility} closeDrawer={this.closeDrawer} sidebarVisible={sidebarVisible} />
        <Content />
      </div>
    );
  }
}

export default App;

index.js 

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';

WebFontLoader.load({
    google: {
      families: ['Roboto:300,400,500,700', 'Material Icons'],
    },
  });

render(
    <Router>
        <App />
    </Router>
    , document.getElementById('root'));
serviceWorker.unregister();

content.js 

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";



class Content extends Component {

    render() {
        const { title } = this.props;
        return (
            <Router>
                <div>
                    <Route exact path="/client" component={Client} />
                    <Route path="/payment" component={Payment} />
                    <Route path="/invoice" component={Invoice} />
                </div>
            </Router>
        );
    }
}

export default Content

NavItemLink.js 

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

const NavItemLink = ({ label, to, icon, exact }) => (
  <Route path={to} exact={exact}>
    {({ match }) => {
      let leftIcon;
      if (icon) {
        leftIcon = <FontIcon>{icon}</FontIcon>;
      }

      return (
        <ListItem
          component={Link}
          active={!!match}
          to={to}
          primaryText={label}
          leftIcon={leftIcon}
        />
      );
    }}
  </Route>
);
export default NavItemLink;

Я думаю, что в content.js, response-router должен обнаружить изменение и отрендерить компоненты.

...