Develop Reference

Text not displayed in React using Routes

I am fairly new to using react and been following a couple of tutorials on YT, I have ran into a problem with one of them. I copied everything line by line, but my text on 'Home' and 'Login' doesnt display! I get no errors, but the page remains blank.
here is App.js
import React from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom';
import Login from './components/Login';
import Home from './container/Home';
const App = () => {
return (
<Routes>
<Route path="login" element={<Login />} />
<Route path="/*" element={<Home />} />
</Routes>
);
};
export default App;
Also the index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root'),
);
**Then Login.jsx
**
import React from 'react';
const Login = () => {
return (
<div>
Login
</div>
);
};
export default Login;
Finally Home.jsx
import React from 'react';``your text``
const Home = () => {
return (
<div>
Home
</div>
);
};
export default Home;
I know I am missing something, but I cant seem to find it! Any and all help is very much appreciated!
Tried to see if I am using on old version of the BroswerROuter/Routes in React, but I have very little knowledge to see the difference just yet!

Seeing blank page in nested routes in react-router v4

I am new to react and still learning.
I am trying to add nested routes in my react project, so that a content of div changes based on the route.
Following are my components :-
//index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
library.add(faIgloo);
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'));
serviceWorker.unregister();
// app.js
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/login/login.js'
import Protected from './components/protected/protected.js'
import './App.css';
class App extends Component {
render() {
return (
<Switch>
<Route exact path="/protected" component={Protected}/>
<Route path="/login" component={Login}/>
</Switch>
);
}
}
export default App;
//protected.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import Header from './header/header.js';
import './protected.css';
import CafePreview from './cafepreview/cafepreview.js'
class Protected extends Component {
render() {
const {match} = this.props;
return (
<div>
<Header></Header>
{/*<Preview/>*/}
<Switch>
<Route path='/protected/cafepreview' component={CafePreview}/>
</Switch>
</div>
);
}
}
export default Protected
// cafepreview.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import './preview.css';
console.log("here");
class CafePreview extends Component {
render() {
return (
<div>
<div>
<i class="fa fas fa-arrow-left"></i>
<span> BACK TO ALL CAFES </span>
</div>
</div>
);
}
}
export default CafePreview
When i open '/protected' i can see the header coming, but when i try to open '/protected/cafepreview' i see an empty page instead of header with cafe preview html.
I tried some options mentioned in this stackoverflow thread Multiple Nested Routes in react-router-dom v4 but none of them worked.
I hope i have explained my problem clearly.

Check documentation https://reacttraining.com/react-router/web/api/Route/exact-bool. Remove exact from the route in the App component and it will start working.

its because you have set exact in the app.js file. Remove it from the particular route. It'll work

react router v4 does not render any other route

I am trying to implement react router but having few problems. Please find the code below:
import React from 'react';
import ReactDOM from 'react-dom';
import { App, Home, Signup } from './containers';
import routes from './routes';
import { BrowserRouter , Route } from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App>
<Route path='/' component={Home} />
<Route path='/signup' component={Signup} />
</App>
</BrowserRouter>,
document.getElementById('app')
);
The App.js file which I am using as a Layout is as below:
import React, { Component } from 'react';
import { Cheader } from '../components';
class App extends Component {
render() {
return(
<div>
<Cheader/>
{this.props.children}
</div>
)
}
}
export default App;
It works when I navigate to http://localhost:3000/, but it does not work when i try to navigate to http://localhost:3000/signup. The page displays the following error:
Cannot GET /signup
The code for signup components and containers is as below:
components: index.js, signuppage.js
import Cheader from './cheader';
import Signuppage from './signuppage';
import Homepage from './homepage';
export {
Cheader,
Homepage,
Signuppage
}
import React from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
const Signuppage = () => (
<Grid>
<Row>
<Col xs={12} sm={12} md={12}>
This is test
</Col>
</Row>
</Grid>
);
export default Signuppage;
containers: index.js, Signup.js
import App from './App';
import Home from './Home';
import Signup from './Signup';
export {
App,
Home,
Signup
}
import React, { Component } from 'react';
import { Signuppage } from '../components';
class Signup extends Component {
render () {
return (
<Signuppage/>
)
}
}
export default Signup;
It seems to be working for the default path, but not for any other route. am I missing any configuration here. Please note that I am using react-router v4. Can anyone please let me know.
Thanks

It is expalined in this: React-router urls don't work when refreshing or writting manually
When you try to go to the link directly, your server cannot find a file match to signup.
Solution 1: Use HashRouter to replace BrowserRouter.
Solution 2: Use fallback technique to setup server that fall back to '/' when no file matched is found.

you have to add exact to the first route
<App>
<Route exact path='/' component={Home} />
<Route path='/signup' component={Signup} />
</App>
another thing can be that you missing pushState settings in your dev server configuration
if you use webpack, add:
devServer: {
port: 3000,
historyApiFallback: true
}

React Router V4 Path Issues

I'm using React Router Dom V4, my path to my homepage works but my path to my about page doesn't work.
I'm not sure if it's anything to do with the fact I'm using Xampp or not.
Index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import App from "./components/App";
import About from "./components/About";
const Root = () => {
return (
<Router>
<div>
<Route path="/" component={App} />
<Route path="/about" component={About} />
</div>
</Router>
)
}
render(<Root />, document.getElementById('main'));
Header.js
import React from "react";
const Header = () => {
return (
<div>
<ul>
<li>About</li>
</ul>
</div>
)
}
export default Header;
About.js
import React from "react";
const About = () => {
return (
<p>This is the about page</p>
)
}
export default About;

The problem is that you use plain html links, so React will not be called when the user clicks the link. You should use the Link Element from the router-module.
Try the following for the menu:
import { Link } from "react-router-dom"
....
<li><Link to='/about'>About</Link></li>

React-router: TypeError: Cannot set property 'props' of undefined

I am trying to set up routing in Meteor using react-router package and have encountered the following TypeError:
Link to image: https://postimg.org/image/v0twphnc7/
The code in I use in main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
// Importing components
import App from './components/app';
import Portfolio from './components/portfolio/portfolio';
//Creating a route
const routes = (
<Router history={browserHistory}>
<Route path='/' component={App}>
<Router path='portfolio' component={Portfolio} />
</Route>
</Router>
);
// Loading routes
Meteor.startup(() => {
ReactDOM.render(routes, document.querySelector('.universe'));
});
The problem that I've managed to identify is that when I define portfolio as a Simple Component it works.
const Portfolio = () => {
return (
<div className='red'>Portfolio page</div>
);
}
But when I extend it from the Component is where the error comes in:
class Portfolio extends Component () {
render() {
return (
<div>Portfolio page</div>
);
}
}
Can you please explain the possible difference between "normal" and class component and why the following error appears.

Assuming you are importing Component as a React.Component correctly, try removing the parenthesis after Component.
Should be:
class Portfolio extends Component {
instead of:
class Portfolio extends Component () {
If not, replace Componentwith React.Component.