Daeamon
@Daeamon

Как заставить работать navlink?

Не работает NavLink, проект основан на этом репозитории https://github.com/conplementAG/ReactSSRTypescript...
App.tsx
import React from 'react';
import { Route, Switch } from 'react-router-dom';

import './app.scss';
import Register from '../register/register';
import Login from '../login/login';
import Home from '../home/home';
import Footer from '../footer/footer';
import Profile from '../profile/profile';
import Wallets from '../wallets/wallets';

export default class App extends React.PureComponent {
    public render() {
        return (<div className="d-flex flex-column h-100">
            <Switch>
                <Route exact={true} path="/" component={Home}/>
                <Route exact={true} path="/register" component={Register}/>
                <Route exact={true} path="/login" component={Login}/>
                <Route exact={true} path="/profile" component={Profile}/>
                <Route exact={true} path="/wallets" component={Wallets}/>
            </Switch>
            <Footer/>
        </div>);
    }
}

import PropTypes from 'prop-types';
import { NavLink, withRouter, RouteProps } from 'react-router-dom';
import './top-nav.scss';
import * as React from 'react';

export default class TopNav extends React.Component {
    public render() {
        return (<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                <a className="navbar-brand" href="#">Navbar</a>
                <button
                    className="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span className="navbar-toggler-icon">&nbsp;</span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item active">
                            <NavLink to="" className="nav-link">
                                Home
                                <span className="sr-only">(current)</span>
                            </NavLink>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#">Link</a>
                        </li>
                        <li className="nav-item dropdown">
                            <a
                                className="nav-link dropdown-toggle"
                                href="#"
                                id="navbarDropdown"
                                role="button"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                            >
                                Dropdown
                            </a>
                            <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a className="dropdown-item" href="#">Action</a>
                                <a className="dropdown-item" href="#">Another action</a>
                                <div className="dropdown-divider" />
                                <a className="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link disabled" href="#" tabIndex={-1} aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                    <span className="navbar-text mr-2">+7 (999) 999-99-99</span>
                    <NavLink to="\login" className="btn btn-success mr-2">Вход</NavLink>
                    <NavLink to="\register" className="btn btn-success mr-2">Регистрация</NavLink>
                </div>
            </nav>);
    }
}
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
miraage
@miraage
Lead Software Engineer
Вижу два варианта (либо оба вместе)
1) Уберте PureComponent из App, не понимаю, зачем он там нужен
2) Обновитесь до React Router v5, там используется другая модель подписки, которая пробьет PureComponent.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы