Im new at routing on react.JS, however I have been struggling because the simple products.jsx
should return a simple message when I click, but no one is displaying.
Index.JS code
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();
code at App.JS
import React, { Component } from "react";
import NavBar from "./components/navbar";
import { Route, Routes } from 'react-router-dom';
import Products from "./components/products";
import "./App.css";
class App extends Component {
render() {
return (
<div>
<NavBar />
<Routes>
<Route path= "/products" component={Products}></Route>
</Routes>
</div>
);
}
}
export default App;
nav.jsx
import React from "react";
const NavBar = () => {
return (
<ul>
<li>
Home
</li>
<li>
Products
</li>
<li>
Posts
</li>
<li>
Admin
</li>
</ul>
);
};
export default NavBar;
products.jsx code
const Product = () => {
return <h1>Products</h1>;
};
export default Product;
I dont know basically what i'm missing.
In react-router-dom v6 the Route components render their components on the element prop as JSX.
<Route path="/products" element={<Products />} />
If you are still using v5 and have just mixed up documentation, then in v5 use the Switch instead (Routes replaced Switch in v6) and use the component prop as you were.
<Switch>
<Route path="/products" component={Products} />
</Switch>
If you are using react-router-dom 6, you have to use element instead of component inside of each route like this:
<Routes>
<Route path= "/products" element={<Products/>}></Route>
</Routes>
if you are using react-router-dom 5, you have to use Switch instead of Routes, like this:
<Switch>
<Route path= "/products" component={Products}></Route>
</Switch>
Related
I tried using react router but it doesn't work. I already know that React Router Dom v6 has changed from Switch to Routes but when I run the program it just shows a blank screen. Does anyone know how to fix this? Here is my code:
App.js
'''
import React, {Component} from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component{
render() {
return (
<Router>
<div>
<HomePage />
</div>
</Router>
);
}
}
const appDiv = document.getElementById("app");
render(<App />,appDiv);
'''
HomePage.js
'''
import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router ,
Routes ,
Route ,
} from "react-router-dom"
export default class HomePage extends Component{
render () {
return (
<Router>
<Routes>
<Route path='/'>
<p>This is Home Page</p>
</Route>
<Route path='/join' element={<RoomJoinPage />} />
<Route path='/create' element={<CreateRoomPage />} />
</Routes>
</Router>
);
}
}
'''
The error is that "You cannot render a Router inside another Router " occurs when we have 2 Router components in the same React application.
So if u see u are calling in App.js and when u call Homepage from app.js it renders again. Thats why everything becomes blank.
and avoid using p tag inside render function in homepage.js
Try doing this:
**App.js**
import React, {Component} from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component{
render() {
return (
<div>
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />,appDiv);
**Homepage.js**
import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router ,
Routes ,
Route ,
} from "react-router-dom"
export default class HomePage extends Component{
render () {
return (
<Router>
<Routes>
<Route path='/'>
</Route>
<Route path='/join' element={<RoomJoinPage />} />
<Route path='/create' element={<CreateRoomPage />} />
</Routes>
</Router>
);
}
}
Can anyone tell me why my router is not working, I didn’t do anything to complicated with my app its one one page and I tried to add a router in app.js that has a link to my home page and every time i add router everything disappears from my app its just a white screen.
app.js
import "aos/dist/aos.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./components/Home";
function App() {
return (
<div className="App">
<h1>Welcome to React Router!</h1>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</div>
);
}
export default App;
Home.js
import React from 'react'
function Home() {
return (
<div>Home</div>
)
}
export default Home
index.js
import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
Try using Switch instead of Routes and you also don't have to use triangular brackets in element
import Home from './components/Home';
import { Route, Switch } from 'react-router';
<Switch>
<Route path="/" element={Home} />
</Switch>
If you want all path begin with / go to your home page, you can change like this: <Route path="/*" element={} />
I use React Router and Laravel. When I navigate throught Link elements all OK, but when I change browser address line to manually show another component Laravel shows it defalt 404 page.
This is default web.php content, in welcome.blade.php I inlcude js/app.js file:
Route::get('/', function () {
return view('welcome');
});
This is my App.js content:
import React from 'react';
import { Switch, Route } from "react-router-dom";
import Signin from "../../containers/Signin";
import Signup from "../../containers/Signup";
import Error from "../../containers/Error";
import Courses from "../../containers/Courses";
import Course from "../../containers/Course";
import Quiz from "../../containers/Quiz";
import Header from "../Header";
import "./App.css";
import Library from "../../containers/Library";
import QuizResults from "../../containers/QuizResults";
import Main from "../Main";
import StudentsList from "../../containers/StudentsList";
function App()
{
return (
<div className="App">
<Header isLogged={false}/>
<Switch>
<Route exact path='/' component={Signin} />
<Route path='/signup' component={Signup} />
<Main>
<Route path='/courses' component={Courses} />
<Route path='/course/:id' component={Course} exact/>
<Route path='/quiz' component={Quiz} />
<Route path='/library' component={Library} />
<Route path='/quiz-results' component={QuizResults} />
<Route path='/students' component={StudentsList} />
</Main>
<Route component={Error} />
</Switch>
</div>
);
}
export default App;
app.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App';
import './index.css';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
So, how to force React Router react on direct browser address line change?
as your working with SPA so you need to configure your web.php like this
Route::any('{all}', function () {
return view('welcome');
})
->where('all', '^(?!api).*$')
->where('all', '^(?!storage).*$');
then react router will catch all routes
and here api and storage routes is exclude from catch so you can use storage files and api to make call api
I am trying my hands on React Nested routing & this is my how my app looks like
Posts.js (Parent (plural) Component) which is rendering fine.
import React from "react";
import { Route } from "react-router-dom";
import Post from "./Post";
import { Link, Switch } from "react-router-dom";
const Posts = ({ match }) => {
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>Rendering with React</Link>
</li>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<div>
<Route path={`${match.path}/:topicId`} component={Post} />
<Route
exact
path={match.path}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
</div>
)}
export default Posts;
Post Component (Child (Singular) Component)
import React from "react";
const Post = ({ match }) => (
<div>
<h1>Child component</h1>
<h3>{match.params.topicId}</h3>
</div>
);
export default Post;
Not sure what config is lacking here, the parent component is rendering fine on the route while the child component content is not rendering
No error in console.
Parent Routing Configuration
import React from "react";
import { Switch, Route,NavLink } from "react-router-dom";
import Home from "./container/home/Home";
import About from "./container/about/About";
import Posts from "./container/post/posts";
import PageNotFound from "./container/Error/404";
const routes = () => (
<Switch>
<Route path="/" exact component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route exact path="/post" component={Posts}></Route>
<Route component={PageNotFound}> </Route>*/}
</Switch>
)
export default routes;
App.js
import React, { Component } from 'react';
import './App.css';
import Layout from "./hoc/layout/layout";
class App extends Component {
render() {
return (
<Layout></Layout>
);
}}
export default App;
So the mistake in your code is pretty trivial. In the parent Route, i.e the Route that is rendering Posts component, you have an exact keyword and hence Routes like /posts/:postId won't match this exact Route with path /post and hence the inner Routes or nested Child Routes won't work
You need to change your Routes config like
const routes = () => (
<Switch>
<Route path="/" exact component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/post" component={Posts}></Route>
<Route component={PageNotFound}> </Route>*/}
</Switch>
)
export default routes;
Having an issue with React Router v4 rendering components. On initial load of the application it will render the correct component corresponding to the URL However, any subsequent Link clicks will not render the desired component.
Libraries
React Router: 4.2.2
React: 15.6.1
React DOM: 15.6.1
-- just to mention libraries in case of impact --
React Redux: 5.0.6
Redux: 3.7.2
Material UI: 0.19.0
Going to omit some imports for sake of brevity
Site Structure
index.jsx
|
App.jsx
|
Auth.jsx
|
Layout.jsx
<Routes />
index.jsx
import React from 'react';
import store from './store.js';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();
import App from './containers/App.jsx';
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider muiTheme={muiTheme}>
<BrowserRouter>
<App />
</BrowserRouter>
</MuiThemeProvider>
</Provider>,
document.getElementById('root')
);
App.jsx
import React, { Component } from 'react';
import Auth from '../components/Auth.jsx';
class App extends Component {
render() {
return <Auth />;
}
}
Auth.jsx
import React from 'react';
import { Route } from 'react-router-dom';
import Layout from './Layout.jsx';
export default function Auth(props) {
//this Has a render function to render a Loader, Error Page, or the Layout
return <Layout />;
}
Layout.jsx
There's more complexity involved here with rendering out the entire application. I'm going to leave the other layout components commented out and just have some Links and a Switch component to get that working before making items more modular.
import React, { Component } from 'react';
import { Link, Switch, Route } from 'react-router-dom';
import Overview from './views/overview/Overview.jsx';
import Home from './views/home/Home.jsx';
export default class Layout extends Component {
render() {
return (
<div className="layout">
{/* <TopBar /> */}
{/* <AppBar/> */}
{/* <Drawer>
<MainMenu/>
</Drawer> */}
<Link to="/">HOME</Link>
<Link to="/overview">Overview</Link>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/overview" component={Overview} />
</Switch>
{/* <Routes /> */}
{/* <Footer /> */}
</div>
);
}
}
Routes.jsx
This is what I'm intending the routes components to look like.
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './views/home/Home.jsx';
import Overview from './views/overview/Overview.jsx';
import Admin from './views/admin/Admin.jsx';
import NotFound from './NotFound.jsx';
export default function Routes(props) {
return (
<Switch>
<Route path="/" exact component={Home} />
<Route path="/overview" component={Overview} />
<Route path="/admin" component={Admin} />
<Route component={NotFound} />
</Switch>
);
}
Is there something I'm missing to get components to render clicking Link? I'm not getting any console errors or anything telling me there's an issue. So not sure if components are not wrapped correctly or what may be causing the issue.
Looks like what was happening is that with Redux integrations was blocking updates.
Need to:
import {withRouter} from 'react-router-dom';
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))'
Documentation
You can also use pure: false in connect.
https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md#my-views-arent-updating-when-something-changes-outside-of-redux