Here's my code for my App.js :
import './App.css';
import { BrowserRouter as Router, Route, } from "react-router-dom";
import Navbar from './Components/Navbar';
import Education from './contents/Education';
function App() { return (
<Router>
{/* route navbar */}
<div className="App">
<Navbar />
{/* route 2 home */}
<Route exact path="/Home">
< Home />
</Route>
{/* Route for About.js contents */}
<Route path="/About">
< About />
</Route>
{/* route to widecard */}
<Route path="/Education">
<Education />
</Route>
</div>
</Router>
)
}
export default App;
When I run npm start in my terminal I get this error:
./src/App.js
Line 18:7: 'Home' is not defined react/jsx-no-undef
Line 26:7: 'About' is not defined react/jsx-no-undef
I have a Home.js and an About.js... I'm still learning react so if this seems like a simple fix I'm sorry in advance! Please let me know if any more information needs to be provided.
Thanks everyone!
You don't import Home or About at the top of the file. IF you import those in, I think you'll be good to go.
Also < Home /> shouldn't have a space between the open bracket and the name. Should be <Home />.
You need to import the componant (Home and About) so you can use then.
Home.js and About.js should contain an export , and App.js should contain
import Home from 'path/to/Home/Home' //(you dont need to write the .js)
And same with About
As with using any component it must first be exported then imported. As it appears that the later was overlooked in your code.
import About from '..relative path to -> /About'
import Home from '..relative path to -> /Home'
When you import something from other modules be sure to mention that function .I assume you know this fact but these mistakes can happen
i.e
import Home from "./pages/home/Home"
Related
When ever i add a <Route> tag to the code everything just disappears from the screen!
the code is fine i guess! there is no warnings showing!!
the output before adding the <Route> tags
and when i add a <Route> tag the output is just not there anymore!!!!
the code before adding the tag:
import React from "react";
import "./App.css";
import Header from "./Header";
import { BrowserRouter, Route } from "react-router-dom";
function App() {
return (
<div className="App">
<BrowserRouter>
<Header />
</BrowserRouter>
</div>
);
}
export default App;
and the code after is really the same but with adding the tags :
import React from "react";
import "./App.css";
import Header from "./Header";
import { BrowserRouter, Route } from "react-router-dom";
function App() {
return (
<div className="App">
<BrowserRouter>
<Header />
<Route></Route>
</BrowserRouter>
</div>
);
}
export default App;
And when i added the tags the content disappeared !
Check you're package.json if the version of react-router-dom is 6 then downgrade it to 5 thats where error comes from.
I know this because now npm install install version 6 as its default version but the tutorials and knowledge about react router on line is still for version 5.
so on your package.json change version from 6 to 5.3.0 and run npm install on your terminal
Since the route tag is empty, you aren't returning anything. You need to pass the path and the component that should be rendered for each path.
In this case considering you have a single path and want to show Hello World!! when the app starts, you should add
<BrowserRouter>
<Route exact path="/" component={App} />
</BrowserRouter>
This will render your App component when you start the app. You can add other components for other routes similarly.
There are few things to do :
a) in react-router-dom v6 Route element should be inside Routes element.
b) instead of component attribute you will have element attribute
c) element attribute should contain jsx like below
<Routes>
<Route exact path="/" element={
<>
<SomeComponent></SomeComponent>
<SomeOtherComponent></SomeOtherComponent>
</>
}>
</Route>
<Route path='/other_address' element={<OtherComponent />}></Route>
</Routes>
Hi I am importing a home component stored in pages folder. Adding it to the Router of my application
Get the error below
./src/App.js Module not found: Can't resolve './pages'
But I seem to have done it correctly?Module not found: Can't resolve './pages'
Please help me why its saying module not found when its there
App.JS CODE
import React from 'react';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import { Route } from 'react-router-dom';
import Home from "./pages";
function App() {
return (
<Router>
<Switch>
<Route path="/browse">
<p>I will be the sign in page</p>
</Route>
<Route path="/signin">
<p>I will be the sign up page</p>
</Route>
<Route path="/browse">
<p>I will be the browse page</p>
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
}
export default App;
home.js CODE
import React from 'react';
export default function Home() {
return (
<h1>Hello Sambulo</h1>
)
}
When you import from './pages' the default behavior is to look for for a file named index.js in the ./pages folder.
If you want to import home.js you have to change the import to
import Home from "./pages/home.js";
the .js at the end is optional as .js is the default file extension for imports
According to React component name convention, it is better to use Home.js as the file name.
So this one is also working.
import Home from "./pages/Home";
Component name should be in PascalCase.
For example, MyComponent, MyChildComponent etc.
I am using Switch and Route from react-router-dom in my reactJS project. And it automatically adds # at the end of the route URLs.
example, if I navigate to localhost:3000 it will show the URL as localhost:3000/#/ .
I want to get rid of this # as I am developing a customer facing product and don't want my URLs to have # in it.
Is there any way for removing that "#"?Help is much appreciated.
Thanks in advance.
Edit:
import { Switch, Route, withRouter} from 'react-router-dom';
#inject('userStore', 'commonStore', 'authStore')
#withRouter
#observer
export default class App extends React.Component {
render(){
return(
<Switch >
<Route path="/signin" component={Login} />
</Switch >
)
}
}
It sounds like you are using a HashRouter component. If you replace this with the BrowserRouter component you will get normal URLs.
Adding the code from your root app.js file to your question will help us debug further.
Edit:
Since you aren't specifying a router component, it react-router is defaulting to HashRouter. You need to wrap your whole app component in a BrowserRouter component to get good urls:
import { Switch, Route, BrowserRouter } from 'react-router-dom';
render(){
return (
<BrowserRouter>
<Switch >
<Route path="/signin" component={Login} />
</Switch>
</BrowserRouter>
);
}
I am learning React Routing and I am watching this tutorial:
https://www.youtube.com/watch?v=1iAG6h9ff5s
Its 2016 tutorial so I suppose something changed because 'react-router' not working anymore and I am supposed to use 'react-router-dom'.
I found that I must uninstall 'history' and 'react-router' and use 'react-router-dom' instead, but It not working as expected when I change it.
How to edit this to make it working with 'react-router-dom'?
import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, IndexRoute, hashHistory} from "react-router";
import Layout from "./pages/Layout";
import Archives from "./pages/Archives";
import Featured from "./pages/Featured";
import Settings from "./pages/Settings";
const app = document.getElementById('app');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={Featured}></IndexRoute>
<Route path="archives" component={Archives}></Route>
<Route path="settings" component={Settings}></Route>
</Route>
</Router>,
app);
My edit:
import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Layout from "./pages/Layout";
import Archives from "./pages/Archives";
import Featured from "./pages/Featured";
import Settings from "./pages/Settings";
const app = document.getElementById('app');
ReactDOM.render(
<Router>
<Route path="/" component={Layout}>
<Route path="/featured" component={Featured}/>
<Route path="/archives" component={Archives}/>
<Route path="/settings" component={Settings}/>
</Route>
</Router>,
app);
Also pushState not working...
Layout.js
import React from "react";
import {Link} from "react-router-dom";
export default class Layout extends React.Component {
navigate() {
this.props.history.pushState(null, "/");
}
render() {
return (
<div>
{this.props.children}
<h1>Welcome</h1>
<button onClick={this.navigate.bind(this)}>Featured</button>
</div>
);
}
}
When I click to Link url change, but content is not loaded... Also when I access url I get "Cannot GET" error
After watching the video, you probably want something like this. At first this would not be so easy to understand but after seeing a few of them you digest it. First you render your Layout with one Route. Then in this top route, you use other Routes to setup your components.
We usually use exact props for a top root like /. If you don't setup your app like that, for example all your routes is in your top Router config, then to use a route something like /featured we must have exact prop. If we don't use it Router always hit / path and we always see the top level component.
But, in your situation, you want other components to be routed in your top level component. So, we drop exact prop here.
Also you can use push to change history.
Update
After think about the navigation button named "Featured", I think you want the Featured component rendered as default one here. When hit the button again you will come back to Featured one. I've changed the code according to that. In this version, we add a / route in the Layout and point it to Featured. So, when we come here it is rendered. But, we use exact prop here since we also want routes like "/featured", "/archives" and "/settings".
export default class Layout extends React.Component {
navigate = () => this.props.history.push("/");
render() {
return (
<div>
<h1>Welcome</h1>
<Link to="/featured">Featured</Link>
<Link to="/archives">Archives</Link>
<Link to="/settings">Settings</Link>
<br />
<button onClick={this.navigate}>Featured</button>
<Route exact path="/" component={Featured} />
<Route path="/featured" component={Featured} />
<Route path="/archives" component={Archives} />
<Route path="/settings" component={Settings} />
<div>
Some other info.
</div>
</div>
);
}
}
const app = document.getElementById('root');
ReactDOM.render(
<Router>
<Switch>
<Route path="/" component={Layout} />
</Switch>
</Router>,
app);
Tried to upgrade react-router from 2 to 4 and broke it and now cant render my app.
getting various errors (the most recent is: <Route> elements are for router configuration only and should not be rendered)
I have also had the error where my ./ route renders fine but every other route blows up when I refresh and says Cannot GET /randomRoute
I am creating a react app and my main index.js file (where I include ReactDOM.render) also includes the routes and looks like so:
import React from 'react';
import ReactDOM from 'react-dom';
import { Route } from 'react-router';
import { BrowserRouter as Router, Match, HashRouter } from 'react-router-dom'
import Header from './components/header';
import './index.scss';
class App extends React.Component {
render() {
return (
<Router history={HashRouter}>
<div>
<Route path={"/"} component={Header} />
</div>
</Router>
);
}
}
ReactDOM.render(<App />,
document.getElementById('content'));
why would I be getting that current error and can anyone give me a simple start to the basics I need to include just to get routing working? it worked in version 2 but I wanted to upgrade and now cant get it working again
The problem is that you are specifying history object as a Router type.
From the Documentation
A <Router> that uses the hash portion of the URL (i.e.
window.location.hash) to keep your UI in sync with the URL.
This is similar to what you would do when you specify history as
hashHistory in Router v2.
Also, history object has been seprated into a seprate package from v4 onwards.
You can either make use of BrowserRouter or HashRouter to render your Routes.
Change your Route Configuration to below if you want to use BrowserRouter which is <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.This is similar to what you would do when you specify history as browserHistory in Router v2.
Also you need to import Route from 'react-router-dom'.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Match, Route} from 'react-router-dom'
import Header from './components/header';
import './index.scss';
class App extends React.Component {
render() {
return (
<Router >
<div>
<Route path={"/"} component={Header} />
</div>
</Router>
);
}
}
Well, in react router v4 the API is different. You have to define it in your index.js file like this,
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div>
<Switch>
<Route path="/path/one" component={ComponentOne} />
<Route path="/path/two" component={ComponentTwo} />
<Route path="/" component={IndexComponent} />
</Switch>
</div>
</BrowserRouter>
</Provider>
, document.querySelector('.container'));
Make sure the order is important here. Put the most generic one at last. Hope this helps. Happy coding !