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!

react router dom and rendering internal component

So, I'm having a simple routing which looks as the following:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import MainWindow from './components/MainWindow';
import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom';
import Settings from './components/Settings';
import { Dashboard } from '#mui/icons-material';
import Issue from './components/Issue';
import CreateIssueTool from './components/CreateIssueTool';
import Form from './components/Form';
function App() {
return (
<>
<div className="App" style={{ height: "100%" }}>
<Routes>
<Route path='/' element={<MainWindow />} />
<Route path='settings/:id' element={<Settings />} />
<Route path='dashboard/:id' element={<Dashboard />} />
{/* for issue need to add it's id */}
<Route path='issue' element={<Issue />} />
<Route path='createissue' element={<CreateIssueTool />} >
</Route>
</Routes>
</div>
</>
);
}
now, when I'm entering the CreateIssueTool's route at http://localhost:3001/createissue,
I'm trying to render within CreateIssueTool's component an internal component:
type Props = {}
function CreateIssueTool({ }: Props) {
return (
<>
<h1>Create Issue Tool</h1>
<Form/>
<Button>cancel</Button>
<Button>approve</Button>
</>
)
}
export default CreateIssueTool
provides me the following errors (I'll provide the shortened version of them to avoid a big messy message, will add them in their original form in the bottom:
> Uncaught Error: useSubmitImpl must be used within a data router. See
> https://reactrouter.com/en/main/routers/picking-a-router.
> The above error occurred in the <ForwardRef> component:
>at http://localhost:3001/static/js/bundle.js:56301:7
>at Form
>at CreateIssueTool (http://localhost:3001/main.06c0f2a1fa7fd3f7c661.hot-update.js:34:7)
>at RenderedRoute (http://localhost:3001/static/js/bundle.js:57372:5)
>at Routes (http://localhost:3001/static/js/bundle.js:57794:5)
>at div
>at App
>at Router (http://localhost:3001/static/js/bundle.js:57732:15)
>at BrowserRouter (http://localhost:3001/static/js/bundle.js:56090:5)
Form:
import { Typography } from '#mui/material'
import { Stack } from '#mui/system'
import { useForm } from "react-hook-form";
import React from 'react'
import { Outlet } from 'react-router-dom';
const Form = () => {
// const { register, handleSubmit, formState: { errors } } = useForm();
return (
<Stack>
<Typography>Testinasdkaskdasdkasjdaskjdajsjkdag</Typography>
</Stack>
)
}
export default Form
index:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, createBrowserRouter } from 'react-router-dom';
import MainWindow from './components/MainWindow';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>
);
reportWebVitals();
I'm a bit confused regarding the Routing process, why would it be affected by the Form component within the CreateIssueTool component?
What would be the right approach to allow such internal rendering?
Regards

React router Dom Link does not change URL

This is my Index.js file:
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { render } from "react-dom";
import { BrowserRouter,Route,Routes } from "react-router-dom";
import Projects from "./Pages/Projects";
import Experience from "./Pages/Experience";
import App from "./App";
const rootElement = document.getElementById("root");
render(
<BrowserRouter>
<Routes>
<Route exact path="/" element={<App />} />
<Route exact path="/Experience" element={<Experience />} />
<Route exact path="/Projects" element={<Projects />} />
</Routes>
</BrowserRouter>,
rootElement
);
This is how I am trying to change the link:
import React from "react";
import { useFrame } from "#react-three/fiber";
import Eliptical from "./Eliptical";
import { Html } from "#react-three/drei";
import {Link} from "react-router-dom";
export default function Planet({ planet: { color, xRadius, zRadius, size, speed, offset,Name = ""} }) {
...
return (
<>
<mesh ref={planetRef} onClick={(e) => {
<Link to="/Projects"></Link>
The issue is It registers the click but does not redirect the page. The pages are setup so when I access "url.com/Experience" it does render but I cant change url when I click.

You can't call JSX in an event handler like this and expect it to do anything. In your case you should use the useNavigate hook and issue an imperative navigation.
import { useNavigate } from 'react-router-dom';
export default function Planet({ planet: { color, xRadius, zRadius, size, speed, offset,Name = ""} }) {
const navigate = useNavigate();
...
return (
<>
<mesh ref={planetRef} onClick={(e) => {
navigate("/Projects");

React link updates URL but page doesn't change/render

I am importing a header into the main.jsx file below as a simple component (SFC) that acts as a navigation menu. Everything looks fine and clicking on the menu does update the URL in the browser. However the application does not change page. I have googled a bit and come across various posts suggesting its related to a blocking update but I don't know how to fix it.
Full source is here: https://github.com/infornite/n4nite-react-ui-aug-2018
src/component/layout/header.tsx
import * as React from 'react'
import { Link } from 'react-router-dom'
import { Layout, Menu } from 'antd'
import '../../style/index.less';
const { Header } = Layout;
interface HeaderProps {
className?: string
}
const nHeader: React.SFC<HeaderProps> = () => (
<Header>
<div className="logo" />
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={['1']}
style={{ lineHeight: '64px' }}
>
<Menu.Item key="1">
<Link to="/">Index</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to="/register">Register</Link>
</Menu.Item>
</Menu>
</Header>
)
export default nHeader
src/routes.tsx
import * as React from 'react'
import { Route, Switch } from 'react-router-dom'
import IndexPage from './pages'
import RegisterPage from './pages'
const Routes: React.SFC = () => (
<Switch>
<Route exact path="/" component={IndexPage} />
<Route path="/register" component={RegisterPage} />
<Route component={() => <div>Not Found</div>} />
</Switch>
)
export default Routes
src/main.tsx
import * as React from 'react'
import { Provider, connect } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router'
import { Store } from 'redux'
import { History } from 'history'
import Routes from './routes'
import { ApplicationState } from './store'
import { Layout } from 'antd'
import './style/index.less';
import Header from './components/layout/header'
import Breadcrumb from './components/layout/breadcrumb'
import Footer from './components/layout/footer'
const { Content } = Layout;
// Separate props from state and props from dispatch to their own interfaces.
interface PropsFromState {
}
interface PropsFromDispatch {
[key: string]: any
}
// Any additional component props go here.
interface OwnProps {
store: Store<ApplicationState>
history: History
}
// Create an intersection type of the component props and our Redux props.
type AllProps = PropsFromState & PropsFromDispatch & OwnProps
class Main extends React.Component<AllProps> {
public render() {
const { store, history } = this.props
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Layout className="layout">
<Header />
<Content style={{ padding: '0 50px' }}>
<Breadcrumb />
<div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
<Routes />
</div>
</Content>
<Footer/>
</Layout>
</div>
</ConnectedRouter>
</Provider>
)
}
}
// It's usually good practice to only include one context at a time in a connected component.
// Although if necessary, you can always include multiple contexts. Just make sure to
// separate them from each other to prevent prop conflicts.
const mapStateToProps = () => ({
})
// Normally you wouldn't need any generics here (since types infer from the passed functions).
// But since we pass some props from the `index.js` file, we have to include them.
// For an example of a `connect` function without generics, see `./containers/LayoutContainer`.
export default connect<PropsFromState, PropsFromDispatch, OwnProps, ApplicationState>(
mapStateToProps
)(Main)

The issue was a silly mistake on my part where I was importing the same page (e.g. my Index page) as both the index page and the register page. Everything was actually working fine but because of this mistake React was loading the same page when I went to either link. I was too quick to assume I had a complex problem and started looking at Blocked Components and HOC's when it was actually a very simple issue.
Wrong: src/routes.tsx
import IndexPage from './pages'
import RegisterPage from './pages'
Correct: src/routes.tsx
import IndexPage from './pages/index'
import RegisterPage from './pages/register'

you've missed the keyword "exact", change your router to:
<Route exact path="/register" component={RegisterPage} />
also, surround it with BrowserRouter

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
}