Не работает link router?

Question

[frolldoll]

Редерится список с кнопкой link которая ведет на стр 'trade/(айдишник обьекта)' , сами кнопки тоже находятся на странице 'trade/id -какой то обьект'

return(
            <tr key={index}><td><Link to={`/trade/${prices.name}`}>{prices.symbol}</Link></td><td>{prices.price_usd}$ </td><td><a style={{ color }}>({percent})%</a></td><td>Sell</td></tr>
        )

Но когда кликаю то он не переходит туда а остается на этой же странице при-чем url поменялся , не мало важно что на странице в зависимости от url мой компонет выводит определенный график , но сейчас когда кликаю по кнопке график не выводит ничего url - На скриншоте видно как меняется url но ничего не робит - если же кликнуть по урлу и enter то стр перезагрузится и график выведется, в чем проблема?

Comments

[Антон Спирин]

Код своих роутов покажите.
Ошибки в консоли посмотрите и сюда скиньте.

[frolldoll]

Антон Спирин, Если вместо link понемять на href то работает но перезагружает страницу (а мне это все ломает)

[Антон Спирин]

frolldoll, а версия роутера какая? Что за history передаете? Почему Switch и exact не используете?
Код компонента Coin какой? Во время клика по Link новых ошибок не появляется?

[frolldoll]

Антон Спирин, Версия 3я , код -

import { connect } from 'react-redux'
import React, { Component } from 'react'
import { fetchCoin } from 'actions'
import R from 'ramda'
import getCoin from 'selectors'
import { Link } from 'react-router'
import TradingViewWidget , { Themes } from 'react-tradingview-widget'
import Menu from '../menu'

import { fetchPrice } from 'actions'
import { getCryptoCurrency } from 'selectors'

class Coin extends Component {
    containerElementId = 'tradingview_0ce8npm 8'
    tradingViewInstance = null
    componentDidMount() {
        this.props.fetchCoin(this.props.params.id),
        this.props.fetchPrice(),
            window.scrollTo(0, 0)
    }
    

    renderPrice_table_Charts(prices , index){
        let
            percent = prices.percent_change_24h,
            color = percent < 0 ? 'red' : 'rgb(2, 214, 19)'
        return(
            <tr key={index}><td><a href={`${prices.name}`}>{prices.symbol}</a></td><td>{prices.price_usd}$ </td><td><a style={{ color }}>({percent})%</a></td><td>Sell</td></tr>
        )
    }

    render() {
        const { coin } = this.props
        const { prices } = this.props
        let
            percent = coin.percent_change_24h,
            color = percent < 0 ? 'red' : 'rgb(2, 214, 19)'
            const
                coinsymbol = coin.symbol === 'BTC' || coin.symbol === 'ETH' ? coin.symbol + 'USD' : coin.symbol + 'ETH'
            return (
                coin 
                ? <div>
                        <div>
                            
                                    
                                      <TradingViewWidget
                                            symbol={coinsymbol}
                                            theme={Themes.Light}
                                            locale="fr"
                                            autosize
               
                    
                                    <div className="balance-tab-header">
                                        <table border={1}>
                                            <tbody><tr><td>Name</td><td>Amont</td><td>Date</td><td>Other</td></tr>
                                            </tbody></table>
                                    </div>{/* balance-tab */}
                                    <div className="balance-tab">
                                        <table border={1}>
                                            <tbody>
                                                {prices.map((prices, index) => this.renderPrice_table_Charts(prices, index))}
                                            </tbody></table>
                                    </div>{/* balance-tab */}
                                    
                                </div>{/* wrapper */}
                            </div>{/* balance-info */}

                            <div className="balance-info">
                                <div className="wrapper">
                                    {(this.props.hideButton) ? <div><h4><p className='colpb'>Balance Histori</p></h4><br /></div> 
                                    : 
                                        <div>                               <h4><p className='colpb'>Balance Histori</p></h4><br />
                                            <button className="footer-menu-btn1">Login</button><br />
                                            <button className="footer-menu-btn1">Sign Up</button></div>}
                                            <br/>
                                     

                                     
                                </div>{/* wrapper */}
                               
                            </div>{/* balance-info */}
                           
               
            )
        
    }
}

const mapDispatchToProps = {
    fetchCoin,
    fetchPrice
}

const makeCoinSelector = () => (state, ownProps) => R.prop(ownProps.params.id.toLowerCase(), state.coin) || {}

const makeMapStateToProps = () => (state, ownProps) => {
    const coinSelector = makeCoinSelector();

    return {
        coin: coinSelector(state, ownProps),
        prices: getCryptoCurrency(state)
    }
}


export default connect(makeMapStateToProps, mapDispatchToProps)(Coin)

[frolldoll]

Антон Спирин, history -

const history = syncHistoryWithStore(browserHistory, store)

[Антон Спирин]

frolldoll, а зачем вы третью версию используете. Вы хоть документацию от нее видели?
Настоятельно рекомендую мигрировать на четвертую.

[frolldoll]

Антон Спирин, Сколько придется переписать кода ? как это повлияет на остальной код ?

[frolldoll]

Антон Спирин, Там у мен много компонентов

[Антон Спирин]

frolldoll, есть руководство по миграции.
Не стоит использовать в новых проектах устаревшие библиотеки.

[frolldoll]

Антон Спирин, Чекни плз - я установил 4.0 но там ошибка
Можешь на гитхабе код глянуть (component/coin) или index.js плз - https://github.com/FinaArio/Link

[Антон Спирин]

frolldoll, с react-router 4 надо использовать react-router-redux 5.
Так же есть смысл обновиться до react 16.
Еще структура проекта очень странная.

Обратите внимание, что history теперь отдельный пакет.
React-router 4 тоже имеет несколько отличий в API

[Антон Спирин]

frolldoll, чтобы роутер заработал:
1. добавить history, можно посмотреть пример в документации react-router-redux 5
2. Заменить все this.props.params на this.props.match.params
3. Изменить инициализацию роутов. Добавить компонент Switch и ключ exact для / и /fund

Ставьте react-router-dom а не react-router

[frolldoll]

Антон Спирин,
index -

import React from 'react'
import ReactDOM from 'react-dom'
import {createStore, applyMiddleware} from 'redux'
import {composeWithDevTools} from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import {syncHistoryWithStore} from 'react-router-redux'
import {Router, Route, browserHistory} from 'react-router'
import {Provider} from 'react-redux'


import reducers from 'reducers'
import Coin from 'containers/coin'
import Lending from 'containers/lending'
import Price from 'containers/fund'
import Calc from 'containers/calc'
import Calc_1 from 'containers/calc1'
import Calc_3 from 'containers/calc3'
import Balance from 'containers/balance'
import Store from 'containers/store'
import Login from 'containers/login'
import SignIp from 'containers/signIn'
import SignUp from 'containers/sign_up'
import New_page from 'containers/new_page'
import createHistory from 'history/createBrowserHistory'
const store = createStore(reducers, composeWithDevTools(
    applyMiddleware(thunk)
))


const history = createHistory()

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
                <Route exact path='/' component={Lending} />
                <Route path='/trade/:id' component={Coin} />
                <Route exact path='/fund' component={Price} />
                <Route path='/fund/invest-I' component={Calc} /> 
                <Route path='/fund/invest-II' component={Calc_1} /> 
                <Route path='/fund/invest-III' component={Calc_3} /> 
                <Route path='/profile-balance' component={Balance} /> 
                <Route path='/news' component={Store} />
                <Route path='/login' component={Login} />
                <Route path='/SignIp' component={SignIp} />
                <Route path='/SignUp' component={SignUp} />
                <Route path='/news/1' component={New_page} />
        </Router>
    </Provider>,
    document.getElementById('root')
);

[Антон Спирин]

frolldoll, я же скидывал руководство по миграции:

// yes
<BrowserRouter>
  <div>
    <Route path='/about' component={About} />
    <Route path='/contact' component={Contact} />
  </div>
</BrowserRouter>

// no
<BrowserRouter>
  <Route path='/about' component={About} />
  <Route path='/contact' component={Contact} />
</BrowserRouter>

В див роуты надо обернуть

[Антон Спирин]

frolldoll, а лучше в Switch

[frolldoll]

Антон Спирин, Не пойму как надо то

import React from 'react'
import ReactDOM from 'react-dom'
import {createStore, applyMiddleware} from 'redux'
import {composeWithDevTools} from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import {syncHistoryWithStore} from 'react-router-redux'
import {Router, browserHistory} from 'react-router'
import  { Switch, Route } from 'react-router'
import {Provider} from 'react-redux'


import reducers from 'reducers'
import Coin from 'containers/coin'
import Lending from 'containers/lending'
import Price from 'containers/fund'
import Calc from 'containers/calc'
import Calc_1 from 'containers/calc1'
import Calc_3 from 'containers/calc3'
import Balance from 'containers/balance'
import Store from 'containers/store'
import Login from 'containers/login'
import SignIp from 'containers/signIn'
import SignUp from 'containers/sign_up'
import New_page from 'containers/new_page'
import createHistory from 'history/createBrowserHistory'
const store = createStore(reducers, composeWithDevTools(
    applyMiddleware(thunk)
))


const history = createHistory()

ReactDOM.render(
    <Provider store={store}>
        <Switch>
                <Route exact path='/' component={Lending} />
                <Route path='/trade/:id' component={Coin} />
                <Route exact path='/fund' component={Price} />
                <Route path='/fund/invest-I' component={Calc} />
                <Route path='/fund/invest-II' component={Calc_1} />
                <Route path='/fund/invest-III' component={Calc_3} />
                <Route path='/profile-balance' component={Balance} />
                <Route path='/news' component={Store} />
                <Route path='/login' component={Login} />
                <Route path='/SignIp' component={SignIp} />
                <Route path='/SignUp' component={SignUp} />
                <Route path='/news/1' component={New_page} />
            
        </Switch>
        

        
    </Provider>,
    document.getElementById('root')
);

[frolldoll]

Антон Спирин, Давай я тебе заплачу) только бы этот link заработал в компоненте coin , я уже не знаю че делать - разбираться в новой версии роутера и подгонять под код я щас не могу

[Антон Спирин]

frolldoll, Router, то зачем убрали?

ReactDOM.render(
    <Provider store={store}>
      <Router>
        <Switch>
                <Route exact path='/' component={Lending} />
                <Route path='/trade/:id' component={Coin} />
                <Route exact path='/fund' component={Price} />
                <Route path='/fund/invest-I' component={Calc} />
                <Route path='/fund/invest-II' component={Calc_1} />
                <Route path='/fund/invest-III' component={Calc_3} />
                <Route path='/profile-balance' component={Balance} />
                <Route path='/news' component={Store} />
                <Route path='/login' component={Login} />
                <Route path='/SignIp' component={SignIp} />
                <Route path='/SignUp' component={SignUp} />
                <Route path='/news/1' component={New_page} /> 
        </Switch>
      </Router>
    </Provider>,
    document.getElementById('root')
);

[frolldoll]

Антон Спирин, Старая ошибка пропала

[frolldoll]

Антон Спирин, А тут что -

[Антон Спирин]

frolldoll, проверьте import { Link } откуда он идет. Видимо, не импортируется.

[Антон Спирин]

frolldoll, все верно вам надо ставить react-router-dom

react-router разделили на разные сборки и Link для браузеров лежит там

а react-router сносите. Это тот же роутер, но с другим набором компонентов

[frolldoll]

Антон Спирин, Привет , извини что пишу сейчас , я по докам попробовал перейти на react-router-dom , подключил withRouter к компонентам , исправил index.js - все равно ошибка . можешь глянуть код пожалуйста? -https://github.com/FinaArio/Link/blob/master/src/i...

[frolldoll]

frolldoll,.

[Антон Спирин]

frolldoll, попробуйте сами скопировать ошибку и загуглить, ответ найдете сразу же.
Я вам уже писал об этой ошибке чуть выше.

<Router history={history}>
            <Switch>
                <Route exact path='/' component={Lending} />
                <Route path='/trade/:id' component={Coin} />
                <Route exact path='/fund' component={Price} />
                <Route path='/fund/invest-I' component={Calc} />
                <Route path='/fund/invest-II' component={Calc_1} />
                <Route path='/fund/invest-III' component={Calc_3} />
                <Route path='/profile-balance' component={Balance} />
                <Route path='/news' component={Store} />
                <Route path='/login' component={Login} />
                <Route path='/SignIp' component={SignIp} />
                <Route path='/SignUp' component={SignUp} />
                <Route path='/news/1' component={New_page} />
            </Switch>
        </Router>

Там вообще написано прямым текстом, что у компонента Router может быть только один дочерний элемент.