React-router 更改位置但不渲染组件

Question

我正在使用 react-router v4 在 React 中进行路由。我面临的问题是 react-router 更改了位置，但无法渲染组件。我听说将 redux 与 react blocks updates 一起使用，但我这里没有使用 redux。

Sidebar.js

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

class Sidebar extends Component {
        render () {
            return (
                <Router>
                    <div>
                        <button className="navbar-toggler" data-toggle="collapse" data-target="#pill">
                            <span><i className="fa fa-ellipsis-v"></i> menu</span>
                        </button>
                        <div id="pill">

                            <ul className="nav nav-pills flex-column sidebar">
                                <li className="nav-item">
                                    <Link to="/" className="nav-link">
                                        <i className="fa fa-dashboard"></i> Dashboard 
                                    </Link>
                                </li>
                                <li className="nav-item">
                                    <a href="#students" className="nav-link" data-toggle="collapse">
                                        <i className="fa fa-users"></i> Students 
                                    </a>
                                    <ul className="collapse" id="students" style={{marginLeft: '-25px'}}>
                                        <li className="nav-item"><Link to="/students" className="nav-link"><i className="fa fa-eye"></i> View students</Link></li>
                                    </ul>
                                </li>

                            </ul>
                        </div>
                    </div>

                </Router>
            )
        }

    }

export default withRouter(Sidebar);

App.js

import React, { Component } from 'react';
import Navbar from './Navbar';
import Sidebar from './Sidebar';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Dashboard from './Dashboard';
import Students from './Students';


class App extends Component {   

    render() {     

        const { match } = this.props;
        return (
            <Router>
        <div>
            <Navbar />
            <div className="container-fluid main">
                <div className="row">
                    <div className="col-sm-2 area-left">
                        <Sidebar />
                    </div>
                    <div className="col-sm-10 area-right float-right">
                        <div>
                            <Route exact path="/" component={Dashboard} />
                            <Route exact path="/students" component={Students} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </Router>
        );
    }
}

export default App;

当路线是/

当路线是/students

重新加载页面渲染组件

Answer 1

基本上用 Switch 封装你的路由。

更新App.js到下面

import React, { Component } from 'react';
import Navbar from './Navbar';
import Sidebar from './Sidebar';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Dashboard from './Dashboard';
import Students from './Students';


class App extends Component {   

    render() {     

        const { match } = this.props;
        return (
            <Router>
        <div>
            <Navbar />
            <div className="container-fluid main">
                <div className="row">
                    <div className="col-sm-2 area-left">
                        <Sidebar />
                    </div>
                    <div className="col-sm-10 area-right float-right">
                        <Switch>
                            <Route exact path="/" component={Dashboard} />
                            <Route exact path="/students" component={Students} />
                        </Switch>
                    </div>
                </div>
            </div>
        </div>
        </Router>
        );
    }
}

export default App;

Answer 2

您在边栏中指定的Link 正在尝试使用您包装组件的路由器，而不是您定义链接的路由器。

这就是您的侧边栏组件的外观。

import React, {Component} from 'react';
import {
    Link,
    withRouter
} from 'react-router-dom';
import $ from 'jquery';

class Sidebar extends Component {
        render () {
            return (
                <div>
                    <div>
                        <button className="navbar-toggler" data-toggle="collapse" data-target="#pill">
                            <span><i className="fa fa-ellipsis-v"></i> menu</span>
                        </button>
                        <div id="pill">

                            <ul className="nav nav-pills flex-column sidebar">
                                <li className="nav-item">
                                    <Link to="/" className="nav-link">
                                        <i className="fa fa-dashboard"></i> Dashboard 
                                    </Link>
                                </li>
                                <li className="nav-item">
                                    <a href="#students" className="nav-link" data-toggle="collapse">
                                        <i className="fa fa-users"></i> Students 
                                    </a>
                                    <ul className="collapse" id="students" style={{marginLeft: '-25px'}}>
                                        <li className="nav-item"><Link to="/students" className="nav-link"><i className="fa fa-eye"></i> View students</Link></li>
                                    </ul>
                                </li>

                            </ul>
                        </div>
                    </div>
                  </div>
            )
        }

    }

export default withRouter(Sidebar);

更多解释： 您应该只将顶级组件包装在路由器中，因为在您的应用程序中缺少更好的术语spawns all the children。此外，除非您使用 redux，否则它将自动为路由器注入 props。所以除非你使用 redux，否则不需要 withRouter() *.

*lmk 如果我错了，我不是专家。

顶级应用组件示例：

render() {
    return(
        <Router history={History}>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/student" component={Student} />
            </Switch>
        </Router>
    )
}