How to use BrowserRouter and Route in CodeSandbox React JS? - reactjs

I'm trying to use BrowserRouter and Router in my ReactJS project at CodeSandbox and there is a dependency error: Could not find dependency: 'react-router-dom' relative to '/src/App.js'
I don't know how to control these dependencies yet. Please Help!
import { BrowserRouter as Router, Route } from 'react-router-dom';

You need to add React-router-dom from Add dependency.

When you are using Codesandbox and you want to use third party package you need to add that third party package as a dependecy of your project which can be done under the Dependencies Section of the left side Explorer for that package to be available in your code so you can import that package

Related

Issues with useLocation hook in #reach/router

I'm using #reach/router in my project. According to the documentation, useLocation hook is supported. However, when I try to import it, I keep on getting the same error Cannot import useLocation because there is no useLocation export in #reach/router. Did you mean Location?
I've tried deleting node_modules and package.json.lock and reinstalling dependencies. Any help?

Having problem with React js project while deploying project

I m new to react, having some problems with build and uploading project.
If I upload with out adding react-router-dom it works fine, but when i upload files from build folder after importing react-router-dom, blank page appears
but there are not any errors in console. Files and codes are visible from the source tab from Developer tools.
Note: With out react-router-dom all the html renders in browser. Also I have added /folder-name/static....(for chunks and manifest)
This is the code to import react-router-dom
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
No any error messages in console.
Install both react-router and react-router-dom.
Got my answer on github page, was not aware of basename for BrowserRouter.
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md

React - Import a file from Node_Modules

I am new to React but have used React Native pretty extensively.
Basically I'm struggling with something that I expect is pretty simple and common.
I want to use an NPM package bootstrap-grid-only-css (https://www.npmjs.com/package/bootstrap-grid-only-css).
I have installed it and its available in the node_modules folder. My issue is trying to import it into the app.js file.
I have tried
import { 'bootstrap-grid-only-css' } from "bootstrap-grid-only-css"
and
import { 'bootstrap-grid.min.css' } from "../node_modules/dist/bootstrap-grid-only-css"
Have also tried
const bs = require('bootstrap-grid.min.css');
none of which seem to work. all error.
Can anyone advise the correct method of import please?
Thanks very much.
If you are importing css file, then do not include file name after import
import "../node_modules/dist/bootstrap-grid-only-css"/bootstrap-grid.min.css
Just like:
import 'react-tabs/style/react-tabs.css';
Its quite simple to add bootstrap to your react application. you can follow below steps according to React Docs Adding Bootstrap
As first step you need to add bootstrap to your project via npm install.
npm install --save bootstrap
you can add bootstrap version behalf of bootstrap in above code.
Then go to src/index.js file and import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning adding below line in index.js
import 'bootstrap/dist/css/bootstrap.css';
Then delete all custom css write inside the scr/App.css
Then checkout adding bootstrap code inside the App.js file.It should be worked properly.
If you want go through this video How to import bootstrap in react application you will understand how does it easy.

How to add React Router to an existing create-react-app?

I can't find any tutorial showing how to add React Router to an existing create-react-app. All of them show how to do it when you start a fresh create react app. How do I add it to the half finished create-react-app I'm working on?
1.install react-router-dom (v4).
import {Switch,Route,Link} from 'react-router-dom';
import BrowserHistory,
now you can use Switch Route Components to play with routing.

cant import routing modules in angular 2

i have tried importing routing classes like this :
import {Route, RouterModule} from '#angular/router';
but it seems they don't exist to be more specific "myapp/node_modules/Angular/router has no exported member Route" the same when i hover over "RouterModule" the same happens for many other modules.i'm using angular-cli for creting my project. is there any fix for this?
the problem was with the angular-cli so i created a project manually based on angular 2 documentation and the problem was gone

Resources