I tried running the code below and got this error:
Uncaught Error: [Login] is not a component. All component children of must be a or <React.Fragment>
I thought I was using <Route> elements as the children of <Routes>. I'm not sure what's going on.
import './App.css';
import Homepage from './components/Homepage/Homepage';
import Login from './components/Login/Login';
import Register from './components/Register/Register';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useState } from 'react';
export const App = () => {
const [user, setLoginUser] = useState({});
return (
<BrowserRouter>
<div className='App'>
<Routes>
<Route exact path='/'>
{user && user._id ? <Homepage setLoginUser={setLoginUser} /> : <Login setLoginUser={setLoginUser}/>
}
</Route>
<Route path='/login'>
<Login setLoginUser={setLoginUser}/>
</Route>
<Route path='/register'>
<Register />
</Route>
</Routes>
</div>
</BrowserRouter>
);
};
Related
Hello i am using ReactJs as my frontend for my django project. Im encountering this issue because i wish to separate my login page from my main layout. As such i adopted such a hierarchy of components:
App.js -> [Main.js -> (Layout.js, etc..) , Login.js]
Apologies for my bad illustration above , here is my code:
App.js
class App extends Component {
###some code####
render() {
if (this.state.checking === true ) {
return <Spin size="large" />
} else {
console.log('state = complete load')
return (
<AlertProvider template={AlertTemplate}{...alertOptions}>
<Router>
<Alerts/>
<Switch>
<PrivateRoute exact path="/" component={Main}/>
<Route exact path="/login" component={Login}/>
</Switch>
</Router>
</AlertProvider>
)
}
}
}
Main.js
export class Main extends Component {
render() {
return (
<Router>
<LayoutHeader>
<BaseRouter/>
</LayoutHeader>
</Router>
)
}
}
export default Main;
Router.js
const BaseRouter = () => (
<div>
<Switch>
<PrivateRoute path="/" exact component={Home} />
<PrivateRoute path="/hello" exact component={hello} />
<Route exact path="*" component={() => '404 NOT FOUND'} />
</Switch>
</div>
);
export default BaseRouter;
Upon refreshing the page in /hello im greeted with a blank page. I don't understand whats going on here , would someone explain to me? Thank you!
I am using Jest to test this Vue component:
import { mount } from '#vue/test-utils'
import ExampleComponent from '../Components/Example.vue'
describe("Test", () => {
it('shows no errors', () => {
jest.spyOn(global.console, 'error');
jest.spyOn(global.console, 'warn');
mount(ExampleComponent)
expect(console.warn).not.toHaveBeenCalled()
expect(console.error).not.toHaveBeenCalled()
})
})
I am expecting this test to Fail since I have this component:
Example.vue
<template>
<div>
{{ number }}
</div>
</template>
<script>
export default {}
</script>
as you can see number is not defined, and if opened this component using the browser it will show me:
[Vue warn]: Property or method "number" is not defined on the instance but referenced during render.
but if I test it, the test will pass. How can If the Vue component has warnings or errors?
In my App?vue template , I have a custom directive ( v-noise )
//App.vue
<template>
<div id="app" class="container" v-noise="'brown'">
<...>
</div>
</template>
Testing my plugin, I don't see the directive in the console.log
import Vue from 'vue'
import App from '#/App'
import VueNoiseGeneratorPlugin from '#/plugins/VueNoiseGeneratorPlugin'
import sinon from 'sinon'
import { mount } from 'avoriaz'
Vue.use(VueNoiseGeneratorPlugin)
...
describe('VueNoiseGeneratorPlugin', () => {
let wrapper
let audioContext = sinon.mock(new (window.AudioContext || window.webkitAudioContext)())
beforeEach(() => {
wrapper = mount(App)
})
it('should start noise', () => {
console.log('WRAPPER.VM.$EL: ', wrapper.vm.$el)
Vue.noise.start()
audioContext.expects('resume').once()
})
})
no v-noise directive
'WRAPPER.VM.$EL: ', <div data-v-ee77fb84="" id="app" class="container">
<h2 data-v-ee77fb84=""><span data-v-ee77fb84="">POMODORO </span>
<span data-v-c15acdbe="" data-v-ee77fb84=""><button data-v-c15acdbe="">
....
I want to be able to change the directive (changing the colour of the noise )
feedback welcome
Semantic UI React Checkbox can be used like this:
import React from 'react'
import { Checkbox } from 'semantic-ui-react'
const TermsOfServiceCheckbox = () => (
<Checkbox label='I accept the Terms of Service' />
)
export default TermsOfServiceCheckbox
How do I set the Checkbox label so that the text Terms of Service is a link to a URL?
label prop implements the item shorthand, so you can also pass there:
<Checkbox label={<label><a href='/'>I accept the Terms of Service</a></label>} />
<Checkbox label={<label>I accept the <a href='/'>Terms of Service</a></label>} />
<Checkbox label={{ children: <a href='/'>I accept the Terms of Service</a> }} />
Combining unit-tests and vue-gettext I get this error when running the tests:
ERROR LOG: '[Vue warn]: Error in render function: "TypeError:
undefined is not a constructor (evaluating
'Number.isNaN(parseInt(n))')"
found in
---> < Translate >
< Root >'
I am not sure how to combine these two to work together.
Reduced example looks like this:
Home.vue
<template>
<div>
<h1>
<translate tag="h1">Homepage</translate>
</h1>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
Home.vue.spec.js
import Vue from 'vue'
import Home from '#views/Home'
describe('Home.vue', () => {
it('should render correct contents', () => {
const Constructor = Vue.extend(Home)
const vm = new Constructor().$mount()
expect(vm.$el.querySelector('div h1').textContent)
.to.equal('Homepage')
})
})