Question

这是我第一次尝试reactJS。我正在使用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组件。

在不同的布局上反应路由器4，LINK和ROUTE

1 个答案: