React-Router更改位置但不渲染組件

Question

我在React中使用react-router v4進行路由。 我面臨的問題是react-router更改了位置，但無法渲染組件。 我聽說將redux與react 塊更新一起使用，但是我在這里沒有使用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;

當路線是/

當路線是/學生時

重新加載頁面將呈現組件

Answer 1

您在側邊欄中指定的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應用程序中的spawns all the children組件spawns all the children 。 此外，除非您使用redux，否則它將自動為路由器注入道具。 因此，除非您使用redux，否則不需要withRouter（）*。

* lmk如果我錯了，我不是專家。

頂級應用程序組件示例：

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

Answer 2

本質上用Switch包裝您的Route。

將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;