React Router how to use charting-libuary?

[kenneth]

React Router will redirect static file charting_library folder and 404 error Any suggestions?

[timocov]

Maybe you can provide some steps to reproduce? Without them I don't think and somebody can help you with that.

[kenneth]

@timocov just like this ,react route can't deal with static file and make charting_library route can't access ,404 error

http://binance.quomap.com/trade/BTCUSDT https://binance.quomap.com/trade/BTCUSDT

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

const App = () => (
  <Router>
    <React.Fragment>
         <Route exact path="/" component={MarketPairs} />
         <Route path="/trade/:symbol" component={Trade} />
    </React.Fragment>
  </Router>
);  

export default App;

[timocov]

When I said "step to reproduce" I mean step-by-step guide to run the issue locally (repo with the example and steps how to run/get the issue).

react route can't deal with static file and make charting_library

Can you serve library's files not by react router but with any other server (like nginx and so on)? All you need to bundle charting_library.min file inside your js bundle (it's API) and then serve library's files somehow (you don't need to serve them with react-router because it's not part of your bundle and you don't need to process them anyhow). But maybe I don't understand you correctly.

[linh626688]

Hi @timocov I think I have issues with react-router and charting_library too. I started with CRA, I work fine, but when adding react-router and Page have ChartComponent located in a route ( /chart ), the Chart didn't render when I changed route (/chart (show) to /home, to /chart (not show)). I inspected src on browser and not see

[timocov]

How react-router works? Does it detach a node from DOM or remove it completely?

[linh626688]

How react-router works? Does it detach a node from DOM or remove it completely?

As I know, React-router update a node from DOM

[timocov]

@linh626688 Thus it removes iframe from the tree? It might be the issue, I think you need to patch router somehow to avoid removing iframe (or any its parent node) from the tree because detaching (replacing/removing) iframe from DOM automatically unload it.

[linh626688]

oh, I'm not sure about that. Do you have a sample or suggestion?

[timocov]

@linh626688 No, unfortunately I'm not familiar with react-related stack much

[linh626688]

Oh. So we have only one way like a sample code to show ifame on react ( can't control render of chart ) Not only react-related, any suggestion 😅

[Hawkeyeanalytics]

Add '/charting_library' to your allowed urls

[rahulwebmob]

any fixes guys ? <Route path="dashboard" element={ <Dashboard> <Outlet /> </Dashboard> } > <Route exact path="tradingView" element={<TradingViewChart />} /> </Route>

      There was an error when loading the library. Usually this error means the library failed to load its static files. Check that the library files are available at localhost:3000/charting_library/ or correct the library_path option.
at http://localhost:3000/charting_library/charting_library.standalone.js:1:10441

i am getting this error