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

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.

Related

MY React app opens Index.html and not App.js while using npm run (blank page)

I am working on a React app. It used to open, but closing my app, taking a break and reopening it again localhost:3000 is showing a blank page from the index.html file, and not the app.js.
In gitbash I used cd to go to the file where the app is located and used npm start
the app was initially created with the create-react-app command
there it says that the webpack was compiled succesfully.
However, I get served a blank page. My index.html file is the following:
<!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`.
-->
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work%20Sans:300,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:600" />
<title>Jammming</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
and my app.js code (located at src/Components/App/App.js) is the following:
import React from 'react';
import './App.css';
import { SearchBar } from '../SearchBar/SearchBar.js';
import { SearchResults } from '../SearchResults/SearchResults.js';
import { Playlist } from '../Playlist/Playlist.js';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchResults: [{ name: 'name1', artist: 'artist1', album: 'album1', id: 1 },
{ name: 'name2', artist: 'artist2', album: 'album2', id: 2 },
{ name: 'name3', artist: 'artist3', album: 'album3', id: 3 }]
};
};
return() {(
<div className = "App" >
<header className="App-header">
<div>
<h1>Ja<span className="highlight">mmm</span>ing</h1>
<div class="App">
<SearchBar />
<div className="App-playlist">
<SearchResults searchResults={this.state.searchResults}/>
<Playlist />
</div>
</div>
</div>
<p>
Edit <code>src/App.js</code> and save to check check.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)};
}
export default App;
and this is the package.json file
{
"name": "jammming",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
many thanks!

TypeError: window.intlTelInput is not a function in reactjs

I am new in ReactJS and getting this error while using jQuery with React JS for intlTelInput I have install npm jQuery and import all the code which required for. I have also include all the CSS and jQuery Links in my index.html and still the code not working and I get this error
TypeError: window.intlTelInput is not a function
If anyone has any idea or solution regarding for this issue, please help me to find a way
This is my Index.html page where I includes ALL the CDN links:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="build/css/intlTelInput.css">
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/css/intlTelInput.min.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.min.js"></script>
<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>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
This is My Login Page Code.
import React from 'react'
import firebase from './firebase'
import "./App.css";
import { getDatabase, ref, child, get } from "firebase/database";
// import PhoneInput from 'react-phone-number-input'
import $ from 'jquery';
import intlTelInputUtils from 'jquery';
class Login extends React.Component {
// <-------------------------------------------------------------------------------------->
// jQuery code
componentWillMount() {
var phoneNumber = window.intlTelInput(document.querySelector("#phoneNumber"), {
separateDialCode: true,
preferredCountries: ["in"],
hiddenInput: "full",
utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
});
$("#getCode").click(function () {
var full_num = phoneNumber.getNumber(intlTelInputUtils.numberFormat.E164);
$("input[name='phoneNumber[full]'").val(full_num);
localStorage.setItem("Phone_No", full_num)
});
}
// // <--------------------------------------------------------------------------------------------------------->
handleChange = (e) => {
const { name, value } = e.target
this.setState({
[name]: value
})
this.setState({ phoneNumber: value }, () => {
console.log(this.state.phoneNumber);
});
}
configureCaptcha = () => {
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
this.onSignInSubmit();
// console.log("Recaptca varified")
},
// defaultCountry: "IN"
}
);
}
onSignInSubmit = (e) => {
e.preventDefault()
this.configureCaptcha()
const phoneNumber = this.state.mobile
const appVerifier = window.recaptchaVerifier;
const dbRef = ref(getDatabase());
get(child(dbRef, `Users/${phoneNumber}`)).then((snapshot) => {
if (snapshot.exists()) {
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then((confirmationResult) => {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
alert('An OTP has been sent to your registered mobile number')
localStorage.setItem("Phone_No", phoneNumber)
console.log(localStorage.getItem('Phone_No'));
}).catch((error) => {
console.error(error);
alert("Oops! Some error occured. Please try again.")
});
}
else {
alert('Sorry, this mobile number is not registered with us. Please use your registered mobile number.');
}
})
}
onSubmitOTP = (e) => {
e.preventDefault()
const code = this.state.otp
console.log(code)
window.confirmationResult.confirm(code).then((result) => {
// User signed in successfully.
const Users = result.user;
console.log(JSON.stringify(Users))
this.props.history.push("/home");
}).catch((error) => {
alert("You have entered wrong code")
});
}
render() {
return (
<div className="Main-header">
<img src="./55k-logo.png" alt="Company Logo" style={{ height: "80px", width: "200px" }} />
<br />
<div>
<h2>Login Form</h2>
<p>Limtless Water. From Unlimited Air.</p>
<form onSubmit={this.onSignInSubmit}>
<div id="sign-in-button"></div>
{/* <PhoneInput */}
<label>Mobile Number</label> <br />
{/* for="phoneNumber" */}
<input type="tel" id="phone" name="mobile" placeholder="Enter Your Number" required onChange={this.handleChange} />
<div className="buttons">
<button type="submit">Submit</button>
</div>
</form>
</div>
<div>
<form onSubmit={this.onSubmitOTP}>
<label >Code</label> <br />
{/* for="code" */}
<input type="number" name="otp" placeholder="Enter The 6 Digit OTP" required onChange={this.handleChange} />
<div className="buttons" >
<button type="submit">Submit</button>
</div>
</form>
</div>
</div>
)
}
}
export default Login;
You should avoid to use jQuery in React projects.
For intl-tel-input, there are react-intl-tel-input and react-intl-tel-input-v2 packages available that can be used.

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'));

http://localhost:8000/ won't load new changes in App.js

I'm trying to add a component to my App.js so I can see it reflected in localhost but I only see the text I wrote before. I tried just changing the text but it's also the same one. Opening it in incognito mode does not help, neither does disabling the cache.
Is something else happening?
This is App.js:
This is the App.js:
import React, { Component } from 'react';
import { render } from "react-dom";
export class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<h1> The View </h1>
)
}
}
const appDiv = document.getElementById('app');
render(<App />, appDiv);
This is the package.json:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.14.0",
"#babel/preset-env": "^7.14.1",
"#babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"reac": "*",
"react-dom": "^17.0.2",
"webpack": "^5.36.2",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#material-ui/core": "^4.11.4",
"react-router-dom": "^5.2.0"
}
}
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Forum</title>
{% load static %}
<link rel= "stylesheet" type="text/css" href="{%static "css/index.css" %}"/>
</head>
<body>
<div id="main">
<div id="app"></div>
</div>
<script src="{% static "frontend/main.js" %}"/>
</body>
</html>

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

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>

Categories