I am currently using react-router-dom to create navigation within my web app.
My index.js and App.js look like:
Index.js
ReactDOM.render(
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>,
document.getElementById('root')
);
App.js
class App extends React.Component {
render() {
return (
<BrowserRouter>
<div>
<Route exact path ='/' component={Home} />
<Route path ='/container' component={Container} />
<Route path ='/profile' component={ProfilePage} />
</div>
</BrowserRouter>
);
}
}
I idea was that if Home contains the header and the sidebar, it would also keep it for other components like Container and ProfilePage.
My Home's render looks like:
render() {
return (
<div>
<Header />
<div className="App">
<Sidebar />
<Container className="container-comp" />
{this.renderLoggingOutput()}
</div>
</div>
);
}
But when I Link to /profile, it just shows me the ProfilePage component without the header and the sidebar.
Any help?
Put your header outside the routes:
class App extends React.Component {
render() {
return (
<BrowserRouter>
<Header /> <-------- place here or outside the routes at a minimum
<div>
<Route exact path ='/' component={Home} />
<Route path ='/container' component={Container} />
<Route path ='/profile' component={ProfilePage} />
</div>
</BrowserRouter>
);
}
}
I have a similar structure in one of my apps.
the routes look like this:
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Switch>
<Route exact path='/' component={Dashboard}/>
<Route path='/character/:id' component={CharacterDetails}/>
<Route path='/encounter/:id' component={Encounter}/>
.........
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
The only job of a route is to mount a component. If you want omnipresent components across all routes, treat the routes as children to a base component.
class App extends React.Component {
render() {
<div>
<Header />
<Sidebar />
{this.props.children}
</div>
}
}
const Routes = () => (
<App>
{/* your routes here */}
</App>
)
Related
function App() {
return (
//BEM naming convention
<div className="app">
<div className="app__body">
<Sidebar />
<Chat />
<Router>
<Routes>
<Route exact path="/arroz" element={<MainPage />} />
</Routes>
</Router>
</div>
</div>
);
}
export default App;
can someone explain me why when i inicialize app, its rendering as supposed to and when i try to render the same thing but with the components inside this one component, it looses the css i have done and only uses a small part of screen. also when i render the page, it should only render the component, but instead is also rendering code that shouldnt be read.
how its being rendered
how it should be rendering
import React from "react";
import Chat from "./Chat";
import Sidebar from "./Sidebar";
function MainPage() {
return (
<div className="mainPage">
<Sidebar />
<Chat />
</div>
);
}
export default MainPage;
obs: i didnt styled MainPage.css and as i was inspecting the page the compenent had "display:block" dont know the meaning
i have done this and this works as i want, still i would like to understand why is not taking the form its suposed to
function App() {
return (
//BEM naming convention
<div className="app">
<div className="app__body">
<Sidebar />
<Router>
<Routes>
<Route exact path="/rooms/:roomId" element={<Chat />} />
</Routes>
</Router>
</div>
</div>
);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
it seems if i put this on indeex and change the app like this it works has it suposed to
function App() {
return (
//BEM naming convention
<div className="app">
<div className="app__body">
<Sidebar />
<Routes>
<Route exact path="/rooms/:roomId" element={<Chat />} />
</Routes>
</div>
</div>
);
}
export default App;
I have routes like this:
<Provider store={store}>
<BrowserRouter>
<Route path="/" component={App} />
<Route path="/customers" component={Customers} />
<Route path="/tickets" component={Tickets} />
</BrowserRouter>
</Provider>
When the route is /customers I want Customers component inside App component. When the route is /tickets I want Tickets inside App and not Customers. I could check the route using
this.props.location.pathname == '/customers' but that's what the Router is for, right? I shouldn't be checking the route and rendering.
Based on my routes above, I see Customers component below App and not inside it.
The App consists of header and stuff. I don't want to add header code to all my components.
App.js:
<Header style={{ height: '39px', lineHeight: '39px' }}>
<Link to="/home">
<div className="logo" style={{ float: 'left' }}>
<img src="" />
<h2>Appnam</h2>
</div>
</Link>
{navEl}
</Header>
<Content >
// Customer or Tickets component here based on route
</Content>
How do I render the components inside App based on the route.
Assuming you have App as the main component, and you want the Tickets and Customers components inside the App component, you can make use of nested routes
<Provider store={store}>
<BrowserRouter>
<Route path="/" component={App} />
</BrowserRouter>
</Provider>
Inside App component
class App extends React.Component {
render() {
return (
<div>
{/* rest of App code */}
<Route path="/customers" component={Customers} />
<Route path="/tickets" component={Tickets} />
</div>
)
}
}
make use of.
<Provider store={store}>
<BrowserRouter>
<Route exact path="/" component={App} />
<Route exact path="/customers" component={Customers} />
<Route exact path="/tickets" component={Tickets} />
</BrowserRouter>
that will work
I have problem in React.js when I save the code the website page say:
A <Router> may have only one child element
What is the problem and how can I solve it?
import React, { Component } from 'react';
import Head from './component/head';
import Contacts from './component/contacts';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Addcontacts from './component/Addcontacts';
import { Provider } from "./context";
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
render() {
return (
<Provider>
<Router>
<Head promo = 'alow' />
<div className='container'>
<Switch>
<Route exact path='/' Component={Contacts} />
<Route exact path='/add' Component={Addcontacts} />
</Switch>
</div>
</Router>
</Provider>
);
}
}
export default App;
you can use React.Fragment https://reactjs.org/docs/fragments.html#short-syntax to fix this issue.
<Router>
<>
<Head promo = 'alow' />
<div className='container'>
<Switch>
<Route exact path='/' Component={Contacts} />
<Route exact path='/add' Component={Addcontacts} />
</Switch>
</div>
</>
</Router>
So basically you just need to have a single tag in you compenent as a child.
Inside your <Router> wrap everything in a single <div> like this
<Router>
<div>
// all your content
</div>
</Router>
Router expect this.props.children to be null or to have length equal to 1
In your case its more than 1
So if you wrap all attr. inside a single tag it should work fine
You can use any of these
<> => React.Fragment
<div> => DIV
Eg:
class App extends Component {
render() {
return (
<Provider>
<Router>
<div>
<Head promo = 'alow' />
<div className='container'>
<Switch>
<Route exact path='/' Component={Contacts} />
<Route exact path='/add' Component={Addcontacts} />
</Switch>
</div>
</div>
</Router>
</Provider>
);
}
}
I'm using react-router v4, no redux. The code example is below:
class MainPage extends Component {
render() {
return (
<div className="MainPage">
<BrowserRouter>
<Switch>
{/* <Route exact path='/' /> */}
<Route path='/signin' component={SignIn}/>
<Route path='/signup' component={SignUp} />
<Redirect from='*' to='/' />
</Switch>
</BrowserRouter>
</div>
);
}
}
When I'm using Link it updates URL in browser but doesn't render anything, nothing happens. When I resfresh, everything becomes fine and component renderes;
export default class Navbar extends Component {
render() {
return (
<div className="navbar">
<BrowserRouter>
<div>
<Link to='/signin'>Sign in</Link>
<Link to='/signup'>Sign up</Link>
</div>
</BrowserRouter>
</div>
);
}
}
I already tried everything, even withRouter(Component), but it says that with router may only be used inside
How can I deal with this?
Here is the working code. As others explained you should use one BrowserRouter. If you want to render your Navbar component all the time then you should place it above Switch but under BrowserRouter hence you need Link there.
const Navbar = () => (
<div className="navbar">
<Link to='/signin'>Sign in</Link>
<Link to='/signup'>Sign up</Link>
</div>
);
class MainPage extends React.Component {
render() {
return (
<div className="MainPage">
<BrowserRouter>
<div>
<Navbar />
<Switch>
{/* <Route exact path='/' /> */}
<Route path='/signin' component={SignIn} />
<Route path='/signup' component={SignUp} />
<Redirect from='*' to='/' />
</Switch>
</div>
</BrowserRouter>
</div>
);
}
}
You should only have a single BrowserRouter component in your tree. The BrowserRouter component holds the shared state the router used to synchronize the URL with the rendered routes. In your situation, you are getting two different versions of router state because you rendering two BrowserRouter components so you should probably render a single BrowserRouter component somewhere higher in your component tree.
If you have an App component that renders both Navbar and MainPage then you can move the router into that component:
export default class App extends Component {
render() {
return (
<BrowserRouter>
<div className="AppContainer">
<Navbar />
<MainPage />
</div>
</BrowserRouter>
);
}
}
I setup React Router but it doesn't work.
I see that URL has changed, I see it in the history of browser. But the page doesn't change.
I want to go to other component which should look like a separate page (not related to the old page, from where I go).
How can I do that?
render() {
return (
<Link to={`/details/${this.props.movie.id}`}>
<div>
<p>{this.props.movie.title}</p>
<div>
<img
src={IMG_URL + this.props.movie.poster_path}
className='preview'
alt={this.props.movie.overview}/>
</div>
<Route path='/details/:number' component={MovieDetails}/>
</div>
</Link>
);
}
index.js:
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<Main />
</BrowserRouter>
</Provider>,
document.getElementById('root'));
Your routes should be declared at a higher level, not as a child of a Link
For example in index.js
<Router>
<div>
<Route exact path="/" component={Main} />
<Route path="/details/:number" component={MovieDetails} />
</div>
</Router>