React-router меняет местоположение, но не отображает компонент

Question

Я использую реагирующий маршрутизатор v4 для маршрутизации в React. Проблемы, с которыми я сталкиваюсь, состоят в том, что реактивный маршрутизатор меняет местоположение, но не может отобразить компонент. Я слышал, что при использовании redux с реагирует на обновления , но я не использую 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 в вашем приложении. Кроме того, он автоматически вводит реквизиты для маршрутизатора, если вы не используете Redux. Поэтому, если вы не используете redux, нет необходимости использовать withRouter () *.

* Пожалуй, если я ошибаюсь, я не эксперт.

Пример компонента приложения верхнего уровня:

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

Answer 2

По существу оберните ваш маршрут с помощью 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;