React-Router, required prop `to` was not specified in `Link` - javascript

I'm trying to implement react-router but I'm getting the error below:
Failed propType: Required prop to was not specified in Link. Check
the render method of app.
I'm not sure what is wrong with my code.
./app/app.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
// Layouts
import App from 'layouts/app';
// Components
import Portfolio from 'ui/portfolio';
import Blog from 'ui/blog';
import TimeLine from 'ui/timeline';
import About from 'ui/about'
import Contact from 'ui/contact'
ReactDOM.render((
<Router history={browserHistory}>
<Route component={App}>
<Route path="/" component={Portfolio} />
<Route path="/blog" component={Blog} />
<Route path="/timeline" component={TimeLine} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Route>
</Router>
), document.getElementById('root'));
./app/layouts/app.js
import React from 'react';
import { Link } from 'react-router';
export default React.createClass({
render: function() {
return (
<div className="app">
<nav>
<Link to="/">Portfolio</Link><br />
<Link to="/blog">Blog</Link><br />
<Link toc="/timeline">TimeLine</Link><br />
<Link toc="/about">About</Link><br />
<Link toc="/contact">Contact</Link>
</nav>
<main>
{this.props.children}
</main>
</div>
)
}
});
You can see below the dependencies I'm using.
"dependencies": {
"axios": "^0.9.0",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.6",
"react-router": "^2.0.0",
"redux": "^3.3.1",
"redux-thunk": "^1.0.3"
},
"devDependencies": {
"babel-core": "^6.3.13",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-2": "^6.3.13",
"gulp": "^3.9.0",
"gulp-serve": "^1.2.0",
"json-server": "^0.8.6",
"webpack-stream": "^3.1.0"
}
Any idea what is happening?
Thanks!

<Link toc="/timeline">TimeLine</Link><br />
<Link toc="/about">About</Link><br />
<Link toc="/contact">Contact</Link>
You want to not toc
<Link to="/timeline">TimeLine</Link><br />
<Link to="/about">About</Link><br />
<Link to="/contact">Contact</Link>

Related

The error message says browserRouter is not defined when using cdn in a html

I am trying to do this in a single html page. I first use unpkg.com to import the required things such as React and React-router-dom. If I use simple React staff, the page can load. Then I am trying to use React-router-dom, I add the script in the head tag and create a simple mydiv7. It shows an error message. Please help me see what is wrong with this code.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.development.js" crossorigin></script>
</head>
<body>
<div id="mydiv7"></div>
<script type="text/babel">
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
)
};
const Home = () => {
return <h1>Home</h1>;
};
const Blogs = () => {
return <h1>Blog Articles</h1>;
};
const Contact = () => {
return <h1>Contact Me</h1>;
};
const NoPage = () => {
return <h1>404</h1>;
};
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
ReactDOM.render(<App />, document.getElementById('mydiv7'));
</script>
</body>
</html>
You need to import BrowserRouter according with documentation.
You can import with cdn using referenfes to window, like this.
const BrowserRouter = window.ReactRouterDOM.BrowserRouter;
I believe somewhere in your script you need to reference the react router package like you do with React for react and ReactDOM for react-dom.
From what I can tell react-router-dom is exported as ReactRouterDOM.
HTML Script Tags
Load the CDN links for the specific version of react-router-dom being used. Current is v6.1.1.
<!-- Load React Router and React Router DOM -->
<script src="https://unpkg.com/react-router#6.1.1/umd/react-router.development.js" crossorigin></script>
<script src="https://unpkg.com/react-router-dom#6.1.1/umd/react-router-dom.development.js" crossorigin></script>
const BrowserRouter = ReactRouterDOM.BrowserRouter;
const Routes = ReactRouterDOM.Routes;
const Route = ReactRouterDOM.Route;
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}

React router doesn't work (Maybe a conflict with Babel)

I tried to build a really simple ReactJS router but it doesn't work when I access my localhost:8080/login URL.
Here is my App.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/style.css';
import { Route, BrowserRouter, Switch } from "react-router-dom";
import Login from "./Pages/Landing/Login.js";
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/login" exact component={Login} />
</Switch>
</BrowserRouter>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
I think this may come from the fact that I also use Babel in my project so it may creates conflicts but nothing shows in my VS Code terminal or even my devTools console.
Here is a part of my package.json file:
"scripts": {
"start": "webpack --mode=development",
"build": "webpack --mode=production",
"dev": "webpack-dev-server"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"style-loader": "^3.2.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.1"
}
This is my index.html file:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
My browser returns "Cannot GET /login" but there aren't any console errors and my router only works for the "/" path.
Could anyone help me with that problem?
You have to do import {BrowserRouter as Router,Switch,Link} from react-router-dom
<Router>
<Switch>
<Route path="/login">
<Login/>
</Route>
</Switch>
</Router>
Create also a simple component called "Homepage" (this is optional).
If at the end, it doesn't work, try to re-create your app without ReactDom.
One last thing, it will be better to not use long folder paths for simple projects. You can bundle all your components in the same folder.
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/style.css';
import { Route, BrowserRouter, Switch, Link } from "react-router-dom";
import Login from "./Pages/Landing/Login.js";
import Home from "./Home"
function App() {
return (
<BrowserRouter>
<div>
<Switch>
<Route exact path="/login"> <Login/> </Route>
<Route exact path="/"> <Home/> </Route>
</Switch>
<Link to="/login"> Login Page </Link>
<Link to="/"> Homepage </Link>
</div>
</BrowserRouter>
);
}
ReactDOM.render(<App />, document.getElementById('app'));

Why does bootstrap CDN stylesheet styling differ from import scss styling?

The styling, specifically the row styling, differs when using the css on the CDN compared to the scss or css that I got from installing react-bootstrap & bootstrap locally. I want to use the SCSS styles so that I'm able to benefit from renaming variables etc.
CDN (How I want it to look)
SCSS (What I want to use, but not how I want it to look)
I am using Create-React-App. Here are the files:
package.json
{
"name": "tire-fill-tool",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.1.10",
"bootstrap": "^5.0.1",
"formik": "^2.2.7",
"node-sass": "^6.0.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.0",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1",
"yup": "^0.32.9"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"babel": {
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
},
"jest": {
"transform": {
"^.+\\.js?$": "babel-jest"
}
},
"devDependencies": {
"#babel/preset-env": "^7.14.2",
"react-test-renderer": "^17.0.2"
}
}
index.scss
#import "~bootstrap/scss/bootstrap";
index.js
import "./index.scss";
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Metric Tire Size</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- <link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
-->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"
></script>
</body>
</html>
TireFillTool.js
import Col from "react-bootstrap/Col";
import Container from "react-bootstrap/Container";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import { useState } from "react";
import { Formik } from "formik";
import * as Yup from "yup";
import Data from "./data";
import Jumbotron from "react-bootstrap/Jumbotron";
const TIRE_PLY_STMT = "Choose Tire Ply...";
function TireFillTool() {
const tireSizeDatabase = JSON.parse(JSON.stringify(Data));
const [tireData, setTireData] = useState(undefined);
const dataSchema = Yup.object().shape({
metric: Yup.object({
firstNum: Yup.number()
.typeError("Please only enter digits")
.moreThan(0, "Please enter a number greater than 0")
.required("Required"),
secNum: Yup.number()
.typeError("Please only enter digits")
.moreThan(0, "Please enter a number greater than 0")
.required("Required"),
thirdNum: Yup.number()
.typeError("Please only enter digits")
.moreThan(0, "Please enter a number greater than 0")
.required("Required"),
symbol: Yup.string()
.notOneOf([TIRE_PLY_STMT], "Please select an option")
.required("Please select an option"),
}),
});
return (
<Container fluid="sm">
<Formik
initialValues={{
metric: {
firstNum: "",
secNum: "",
thirdNum: "",
symbol: TIRE_PLY_STMT,
},
}}
validationSchema={dataSchema}
// validate={(values) => {
// const errors = {};
// if (!values.metric.firstNum) {
// errors.metric.firstNum = "Required";
// }
// return errors;
// }}
onSubmit={(values, { setSubmitting }) => {
const newVals = tireSizeDatabase.metric.filter(
isSameTireSize(values)
);
const avgGals = Math.round(
newVals.reduce((sum, e) => sum + Number(e.galsBallast), 0) /
newVals.length
);
setTireData({
tireSize: `${values.metric.firstNum}/${values.metric.secNum}${values.metric.symbol}${values.metric.thirdNum}`,
gals: avgGals,
});
setSubmitting(false);
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
<div>
<h1 className="pt-4">Metric Tire Size</h1>
<Form noValidate onSubmit={handleSubmit}>
<Form.Row>
<Form.Group as={Col} controlId="firstMetricNumber">
<Form.Control
placeholder="Tire Width (mm)"
name="metric.firstNum"
onBlur={handleBlur}
onChange={handleChange}
value={values.metric.firstNum}
isInvalid={
errors.metric?.firstNum && touched.metric?.firstNum
}
/>
{/* <Form.Control.Feedback type="invalid">
{errors.metric?.thirdNum}s
</Form.Control.Feedback> */}
</Form.Group>
<h3 className="ml-2 mr-2">/</h3>
<Form.Group as={Col} controlId="secondMetricNumber">
<Form.Control
placeholder="Aspect Ratio"
name="metric.secNum"
onBlur={handleBlur}
onChange={handleChange}
value={values.metric.secNum}
isInvalid={errors.metric?.secNum && touched.metric?.secNum}
/>
<Form.Control.Feedback type="invalid">
{errors.metric?.secNum}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Control
as="select"
// defaultValue={"Choose..."}
name="metric.symbol"
onBlur={handleBlur}
onChange={handleChange}
value={values.metric.symbol}
// isInvalid={errors.metric?.symbol && touched.metric?.symbol}
isInvalid={errors.metric?.symbol && touched.metric?.symbol}
custom
>
<option>{TIRE_PLY_STMT}</option>
<option>-</option>
<option>R</option>
<option>B</option>
<option>D</option>
</Form.Control>
<Form.Control.Feedback type="invalid">
{errors.metric?.symbol}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="thirdMetricNumber">
<Form.Control
placeholder="Rim Diameter (in.)"
name="metric.thirdNum"
onBlur={handleBlur}
onChange={handleChange}
value={values.metric.thirdNum}
isInvalid={
errors.metric?.thirdNum && touched.metric?.thirdNum
}
/>
{errors.metric?.thirdNum && touched.metric?.thirdNum ? (
<Form.Control.Feedback type="invalid">
{errors.metric?.thirdNum}
</Form.Control.Feedback>
) : (
<Form.Control.Feedback>a</Form.Control.Feedback>
)}
</Form.Group>
</Form.Row>
<Form.Row className="justify-content-center">
<Button bsClass="xyz" type="submit" disabled={isSubmitting}>
Calculate Gallons
</Button>
</Form.Row>
{tireData?.gals ? (
<Jumbotron className="mt-3">
<h1>{tireData.gals} gallons</h1>
On average {tireData.gals} gallons of Beet Juice will fill a
{tireData.tireSize} tire approximately 75% full
<p>
Did you know that Beet Juice is freeze resistant to -35° F,
non-toxic, biodegradable, water soluble, <i>and</i> animal
food grade safe?
</p>
<Button
href="https://www.google.com"
target="_blank"
rel="noopener noreferrer"
>
Find Your Nearest Beet Juice Dealer
</Button>
</Jumbotron>
) : (
<div></div>
)}
</Form>
</div>
)}
</Formik>
</Container>
);
}
Thanks!
As you can see, in the button and the input fields the bootstrap's classes are working, the problem is in JSX's file, share it and we will help you in your structure. Maybe the div container doesn't have the "row" class.

Why page only loading with React Router?

I have set Link and Route path with my header.js file. But with the laravel and react app, when i run npm run dev , it runs successfully. After that, when i run localhost:8000, the page only loading not showing any content. when i remove the
<Route exact path ="/" component={Index} />
<Route exact path ="/about" component={About} />
from script, it runs successfully, but with above code, it's only loading the page.
Header.js
import React, { Component } from 'react';
import{ BrowserRouter as Router, Route, Link} from 'react-router-dom';
import Index from './Index';
import About from './about';
export default class header extends Component {
render() {
return (
<Router>
<div>
<Link to ="/">Home</Link>
<Link to ="/about">About Us</Link>
<Route exact path ="/" component={Index} />
<Route exact path ="/about" component={About} />
</div>
</Router>
);
}
}
Index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import Footer from './footer';
export default class Index extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<Header />
<div className="card">
<h1>This is home page</h1>
</div>
<Footer />
</div>
</div>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Index />, document.getElementById('app'));
}
Welcome.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/app.css" />
<title>Laravel</title>
</head>
<body>
<div id="app">
<h1>Hello... This is example</h1>
</div>
<script src="js/app.js"></script>
</body>
</html>
If my understanding is correct then I guess you can't call Index.js from Index.js.
What I mean to say is that you are trying to render the Index.js infintely.
Index.js is your root component. It has <Header/> which calls Index.js when the route matches the path /. Then it again calls Index.jswhich has <Header/> and so on.
What you can do instead is define a new Home component and create a new index.js to save yourself from the Infinite loop.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import Footer from './footer';
export default class Home extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<Header />
<div className="card">
<h1>This is home page</h1>
</div>
<Footer />
</div>
</div>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Home />, document.getElementById('app'));
}
You have an infinite recursive loop:
Index renders the component Header.
Header renders the component <Route exact path ="/" component={Index} />
This Route renders Index when you are on /
<Route/> works by rendering the component prop when you are on the path prop.

React Router: Target container is not a DOM element

I am getting this error while following React Router Tutorial HERE and HERE
It should work as it's supposed to do, because in index.html i have added "app" as id in a div container.
_registerComponent(...): Target container is not a DOM element.
./src/index.js
src/index.js:15
Here is INDEX.JS
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import About from './modules/About'
import Repos from './modules/Repos'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
ReactDOM.render((
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<App />
<Route exact path="/" component={App}/>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</div>
</Router>
), document.getElementById('app'));
INDEX.HTML
<!doctype html>
<html>
<head>
<title>My First React Router App</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
I was facing same issue-
My src/index.js looking like this-
ReactDOM.render(<App />,routing, document.getElementById('root'));
I moved all routes in a variable such as routing and now code in src/index.js file looks like-
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import About from './pages/abouts/about';
import Contact from './pages/contacts/contact';
import * as serviceWorker from './serviceWorker';
const routing = (
<Router>
<div>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
serviceWorker.unregister();
So, no need to pass <App/> any more in ReactDOM and that worked for me.

Categories