Javascript 在不同布局上反应路由器4、链路和路由

这是我第一次尝试做这个。我正在使用AdminLTE并试图从侧栏导航更改内容。这是我的代码：

菜单：

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

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router，Link}；
类菜单扩展组件{
render（）{
返回(


欢迎


关于


)
}
}
ReactDOM.render（，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;

从“React”导入React；
从“./欢迎”导入欢迎
从“./About”导入关于
从“react Router dom”导入{BrowserRouter as Router，Route}；
常量createRoutes=（）=>(


);
导出默认创建路由；

---

问题是，当我从侧边栏单击链接时，URL已更改，但内容未更改。除非我刷新页面或单击浏览器上的“上一步”，否则内容将更改。我不确定这是对还是错，因为我读了很多教程，其中

和

位于同一

内

在html中只需要一个标记，即可呈现整个React应用程序。要使

链接

正常工作，您需要将它们放在一个

浏览器路由器下

：

菜单：

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

导出默认类菜单扩展组件{
render（）{
返回(


欢迎


关于


);
}
}

路线：

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

constmyroutes=（）=>(


);
导出默认路径；

主机：

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

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“/routes”导入createRoutes；
从“react Router dom”导入{BrowserRouter as Router，Link}；
从“路径/到/菜单”导入菜单；
从'path/to/MyRoutes'导入MyRoutes；
const routes=createRoutes（）；
ReactDOM.render(
,
document.getElementById（'master'）
);

---

所有内容都作为一个React组件呈现给

master

标记。

感谢您的回复！我已经尝试了你的代码，但它使菜单移动到内容布局，从到。当我点击时，内容仍然没有改变。这些是你需要解决的样式问题，就像通常使用HTML和CSS一样。不知道为什么链接不起作用。嘿，现在内容改变了，可能是缓存造成的。关于移动到

内容

布局的菜单，我不确定，因为样式问题，我认为这是因为所有内容都呈现到

主

标记。因此，

菜单

将显示在

内容

版面中，而不是侧边栏中<代码>菜单应在此处呈现

@kresek您将在一个html页面中拥有两个应用程序。相信我，你只需要一个标签和ret可以完成与html和css。相信我，这样你会省去很多麻烦。是的，我稍后会试试，但现在我仍然好奇如何解决这个问题。没问题，这不是我的项目，这只是我第一次学习：D。谢谢你的帮助，托马斯兹！