React Router 4, LINK и ROUTE на другой компоновке

Question

Я впервые пытаюсь среагировать. Я использую AdminLTE и пытаюсь изменить содержимое с боковой панели навигации. Это мой код:

меню:

<ul class="sidebar-menu tree" id="menu"></ul>

Содержание:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Quick Example</h3>
                </div>
                <div id="master"></div>
            </div>
        </div>
    </div>
</div>

master.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import createRoutes from './routes';

    const routes = createRoutes();

    ReactDOM.render(
        routes,
        document.getElementById('master')
    );

menu.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Link} from 'react-router-dom';


class Menu extends Component {

    render() {
        return (
            <Router>
                <ul>
                    <li>
                        <Link to={"/laravel-react/public/dashboard/welcome"}><i className="fa fa-circle-o"></i> Welcome</Link>
                    </li>
                    <li>
                        <Link to={"/laravel-react/public/dashboard/about"}><i className="fa fa-circle-o"></i>About</Link>
                    </li>

                </ul>
            </Router>
        )
    }
}

ReactDOM.render(<Menu/>, document.getElementById('menu'));

routes.js

import React from 'react';
import Welcome from './Welcome'
import About from './About'
import {BrowserRouter as Router, Route} from 'react-router-dom';

const createRoutes = () => (

    <Router>
        <ul>
            <Route exact path="/laravel-react/public/dashboard/welcome" component={Welcome}/>
            <Route exact path="/laravel-react/public/dashboard/about" component={About}/>
        </ul>
    </Router>
);

export default createRoutes;

Проблема в том, что когда я нажимаю ссылку на боковой панели, URL-адрес изменяется, но содержимое не изменяется. За исключением случаев, когда я обновляю страницу или нажимаю обратно в браузере, содержимое будет изменено. Я не уверен, правильно это или нет, потому что я прочитал много уроков, где <route> и <link> расположены внутри одного и того же <Router>.

Answer 1

Вам нужен только один тег в html, где вы будете рендерить все приложение React. Чтобы Links работал, вы должны поместить их в один BrowserRouter:

Меню:

export default class Menu extends Component {
  render() {
    return (
      <ul>
        <li>
          <Link to={"/laravel-react/public/dashboard/welcome"}>
            <i className="fa fa-circle-o" /> Welcome
          </Link>
        </li>
        <li>
          <Link to={"/laravel-react/public/dashboard/about"}>
            <i className="fa fa-circle-o" />About
          </Link>
        </li>
      </ul>
    );
  }
}

маршруты:

const MyRoutes = () => (
  <ul>
    <Route
      exact
      path="/laravel-react/public/dashboard/welcome"
      component={Welcome}
    />
    <Route
      exact
      path="/laravel-react/public/dashboard/about"
      component={About}
    />
  </ul>
);

export default MyRoutes;

Мастер:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import createRoutes from './routes';
import {BrowserRouter as Router, Link} from 'react-router-dom';
import Menu from 'path/to/Menu';
import MyRoutes from 'path/to/MyRoutes';

const routes = createRoutes();

ReactDOM.render(
    <Router>
      <div>
        <Menu />
        <MyRoutes />
      <div>
    </Router>,
    document.getElementById('master')
);

Все отображается в теге master как один компонент React.