Pardon for this elementary issue.
I'm trying to figure out where to place removeHash() using the NPM react-scrollable-anchor. Link to the documentation is here.
Currently, the hash is removed only after I refresh the page. After the refresh, the location stays where the anchor is. What I would like to happen is that everytime I click an anchor link the URL removes the hash without the need to refresh.
I currently have removeHash() in my main index.js file as seen below.
I did try placing removeHash() at the bottom of my components right above the export statements but that didn't work.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { removeHash } from 'react-scrollable-anchor';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
removeHash();
Related
I just created a new ReactJS app using npx create-react-app I believe this uses React version 18 (correct me if wrong).
I'm trying to set up a router for this app but I'm not sure which one to use: react-router-dom or react-router ..or another one?
I went ahead and installed npm -i react-router-dom
Here is my app so far:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {} from 'react-router-dom'; //adding this line is giving me errors
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
..however adding import {} from 'react-router-dom'; is giving me compile errors like:
Compiled with problems:X
ERROR in ../node_modules/react-router-dom/dist/index.js 13:0-836
export 'AbortedDeferredError' (reexported as 'AbortedDeferredError')
was not found in 'react-router' (possible exports: Await, MemoryRouter
are there other modules I need to install? Or should I be using another router?
You cannot leave the import statement empty. You need to actually import something.
Generally, it works like this -
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
You can read the react-router-dom documentation to learn more about it.
I'm not able to write the code inside the index.js file. I wrote the code as per the code sandbox section of cube docs. It sends a console warning that my app may work as React 17. When I followed 18.1.0 conventions the page was shown loading and never stopped. Any solution to this?
It's written like this currently and I've added CubeProvider to access cubejsapi at app.js file while setting up routes, which is working fine.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AuthProvider } from './context/AuthProvider';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<AuthProvider>
<App />
</AuthProvider>
</React.StrictMode>,
document.getElementById('root')
);
Does AuthProvider a default export or named export?
For good practice, move the AuthProvider to the app component .
Index.js need to be codeless as you can.
More of context here : https://reactjs.org/docs/context.html
I am using ReactJS and i am facing an issue where as soon as i add react-boostrap CDN in the public/index.html react file or add this link import 'bootstrap/dist/css/bootstrap.min.css'; to index.js, Boostrap automatically disable the use of all the css i have built for the web application.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// REACT-BOOTSTRAP
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint...
reportWebVitals();
I tried to fix it in index.js or any page i want to use import 'bootstrap/dist/css/bootstrap.min.css' by importing that after import './index.css'; or any custom css but it does not seem to solve the conflict, is there a solution out there that i am not aware of?
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import "github-fork-ribbon-css/gh-fork-ribbon.css";
ReactDOM.render(<App />, document.getElementById("root"));
code is this. In last line. I know ReactDom.render means but I cannot figure out what <App /> means. especially "/>"
App refers to the file imported on line 3:
import App from "./App";
Open App.js on the same directory to look at the component. If you used the create-react-app, it is probably the root component of your application.
I have a react application that needs to be able to be display in both a light and dark theme.
The two themes I am using are "bootstrap-darkly" and "bootstrap-flatly".
This is what my index.js looks like:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import registerServiceWorker from './registerServiceWorker';
// import 'bootstrap/dist/css/bootstrap.min.css';
import './bootstrap-darkly.min.css';
import './lib/sb-admin/sb-admin.min.css';
import './lib/fontawesome-free/css/all.css';
import './index.css';
import 'jquery/dist/jquery';
import 'bootstrap/dist/js/bootstrap.bundle';
import './prototypes';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Changing the line "import './bootstrap-darkly.min.css';" to "import './bootstrap-flatly.min.css';" achieves the desired result of changing the theme across the application, but I'd like this to be toggled via the UI.
Where / how would the correct approach be to change this via the UI? How can I modify what CSS is imported on that aforementioned line via the UI?
I understand this would probably be best done via a user settings page but am unclear how to make this change using JS.