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");
Related
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
I am tried to make a chat room application with react js,
but I have faced a problem when I tried to see just chatroom page then it's ok, but when I refresh the page then again show me the home page that mean show me both page in the chatroom page, I don't know why show me home page again,
I have tried this way:
import React from "react";
import { Router, Route } from "react-router-dom";
import HomePage from "./HomePage";
import TopBar from "./TopBar";
import { createBrowserHistory as createHistory } from "history";
import "./App.css";
import ChatRoomPage from "./ChatRoomPage";
const history = createHistory();
function App() {
console.log("Working");
return (
<div className="App">
<Router history={history}>
<TopBar />
<Route path="/:chatRoomId" component={HomePage} />
<Route
path="/chatroom"
exact
render={(props) => <ChatRoomPage {...props} />}
/>
</Router>
</div>
);
}
export default App;
any suggestion please.
You should use react router dom exact way
like: import { BrowswerRouter as Router, Route, Switch } from "react-router-dom";
then take upper the render router.
import React from "react";
import { BrowswerRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./HomePage";
import TopBar from "./TopBar";
import { createBrowserHistory as createHistory } from "history";
import "./App.css";
import ChatRoomPage from "./ChatRoomPage";
const history = createHistory();
function App() {
console.log("Working");
return (
<div className="App">
<Router history={history}>
<TopBar />
<Switch>
<Route
path="/chatroom"
exact
render={(props) => <ChatRoomPage {...props} />}
/>
<Route path="/:chatRoomId" component={HomePage} />
</Switch>
</Router>
</div>
);
}
export default App;
I am using a tawk.io chat on my reactjs app:-
This is content of my index.js file:-
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import BookRead from "./pages/BookRead";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Switch>
<Route exact path="/view/:id/:section/:part" component={BookRead} />
<Route component={App} />
</Switch>
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
App.js component file content :-
import React, { useEffect, useState } from "react";
import { Route } from "react-router-dom";
import Login from "./pages/Login";
import Account from "./pages/Account";
import Contact from "./pages/Contact";
import Home from "./pages/Home";
function App(props) {
useEffect(() => {
var Tawk_API = Tawk_API || {},
Tawk_LoadStart = new Date();
(function () {
var s1 = document.createElement("script"),
s0 = document.getElementsByTagName("script")[0];
s1.async = true;
s1.src = "https://embed.tawk.to/5a624e/default";
s1.charset = "UTF-8";
s1.setAttribute("crossorigin", "*");
s0.parentNode.insertBefore(s1, s0);
})();
}, []);
return (
<div className="content">
<div className="container">
<Route exact path="/" component={Home} />
<Route path="/contact-us" component={() => <Contact user={user} />} />
)}
/>
<Route path="/account" component={Account} />
</div>
</div>
);
}
export default App;
How can i show the chat widget in all components inside the App.js route and hide/remove it from the route <Route exact path="/view/:id/:section/:part" component={BookRead} /> ?
Solved by adding the following to BookRead.js component :-
useEffect(() => {
if (window.Tawk_API) {
window.Tawk_API.hideWidget();
}
return () => {
if (window.Tawk_API) {
window.Tawk_API.showWidget();
}
};
}, []);
The API docs at https://developer.tawk.to/jsapi/ suggest you could use Tawk_API.showWidget(); and Tawk_API.hideWidget(); to show and hide the widget.
React-Router provides an useLocation hook you can use to figure out when the location has changed.
Put those two together and you should be able to get the effect you want.
I have two routes that I lazy load. Currently when I change route by f.e. using history.push('/') the former route disappears, but the new one won't show up (after reloading it'll show up). How so?
import React, {Suspense, lazy} from 'react';
import './App.scss';
import './modules/Header/Header.scss';
import {Route, Switch} from "react-router-dom";
import Footer from "./modules/Footer/Footer";
const LandingPage = lazy(() => import('./modules/LandingPage/LandingPage'))
const Dashboard = lazy(() => import('./modules/Dashboard/Dashboard'))
function App() {
return (
<div className="App">
<Suspense fallback={<div/>}>
<Switch>
<Route exact path='/' component={LandingPage}/>
<Route path='/dashboard' component={Dashboard}/>
</Switch>
</Suspense>
<Footer/>
</div>
);
}
export default App;
Inside of index.js I initialized Router:
...
import {Router} from 'react-router-dom';
import {createBrowserHistory} from 'history';
export const history = createBrowserHistory();
ReactDOM.render(
<React.StrictMode>
<Router history={history}>
<App/>
</Router>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
I would like to recommend react-loadable for code splitting dynamic imports.
With react-loadable your code should be like that:
import React from 'react';
import './App.scss';
import './modules/Header/Header.scss';
import {Route, Switch} from "react-router-dom";
import Footer from "./modules/Footer/Footer";
import Loadable from 'react-loadable'
const LoadableLandingPage = Loadable({
loader: () => import('./modules/LandingPage/LandingPage'),
loading() {
return <div>Loading...</div>
},
})
const LoadableDashboard = Loadable({
loader: () => import('./modules/Dashboard/Dashboard'),
loading() {
return <div>Loading...</div>
},
})
function App() {
return (
<div className="App">
<Switch>
<Route exact path='/' component={LoadableLandingPage}/>
<Route path='/dashboard' component={LoadableDashboard}/>
</Switch>
<Footer/>
</div>
);
}
export default App;
I have a react app setup by dva 2.0.1. In the routers.js, I have:
import React from 'react';
import { Router, Switch, Route, IndexRoute } from 'dva/router';
import IndexPage from './routes/IndexPage'
import CountPage from './routes/CountPage'
function RouterConfig({ history }) {
return (
<Router history={history}>
<Route path="/" component={IndexPage}>
<Switch>
<Route path="/count" component={CountPage}/>
<Route path="/statements" component={CountPage}/>
</Switch>
</Route>
</Router>
);
}
export default RouterConfig;
And in my IndexPage, I have:
import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';
import { Layout } from 'antd'
import Header from '../components/Header'
const { Sider, Content, Footer } = Layout;
const IndexPage = (props) => {
const { children, routes } = props;
console.log(props);
return (
<Layout>
<Header routes={routes}>header</Header>
<Layout>
<Sider>sider</Sider>
<Content>{children || "No content"}</Content>
</Layout>
</Layout>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
However, the console.log(props); gives dispach, history, etc. But children and routes are not in it.
What happened?
You don't have any child component on your Index component.
If you change this
<Route path="/" component={IndexPage}>
to this
<Route path="/" component={()=>(<IndexPage><p>This is a child component</p></IndexPage>)}>
you can see the child components inside your Index component.
It turns that I was using react-router#2 syntax and should be react-router#4.