Задать вопрос
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>);
    }
}
  • Вопрос задан
  • 2662 просмотра
Подписаться 1 Средний 8 комментариев
Решения вопроса 1
miraage
@miraage
Старый прогер
Вижу два варианта (либо оба вместе)
1) Уберте PureComponent из App, не понимаю, зачем он там нужен
2) Обновитесь до React Router v5, там используется другая модель подписки, которая пробьет PureComponent.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы