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>
Related
I'm starting in React, and create a simple page Users and I would like to navigate between it and Home
| index.js
| components
| App.js
| Users.js
| Home.js
| Header.js
That's the structure that I defined:
Header.js:
<header>
<BrowserRouter>
<Link to="/users">Users</Link>
</BrowserRouter>
</header>
App.js:
< div >
<Router>
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</Router>
</div>
Index.js:
ReactDOM.render(
<App />,
document.getElementById('root')
);
It is not working, if I click in <Link to='users' /> does not work, but enter in URL localhost:3000/users the pages is redirected.
Solution
Remove <BrowserRouter> wrap from Link
<header>
<Link to="/users">Users</Link>
</header>
Change your code as follows
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/usuarios" exact component={Users}/>
</Switch>
</BrowserRouter>
import {Link} from "react-router-dom";
import Users from './Users';
class Header extends Component {
render() {
return (
<header>
<div className="links">
<nav>
<ul>
<li><Link to="/usuarios">Users</Link></li>
</ul>
</nav>
</div>
</header>
)
}}
Official documentation
try move BrowserRouter in index.js file
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
Currently using ReactJS to construct a small web app. I have the following parent function:
const Main = () => {
return (
<div className="dialog-base">
<BrowserRouter>
<Switch>
<Route exact path="/login" component={Login}></Route>
<Route exact path="/login/forgot_password" component={ForgotPwd}></Route>
<Route exact path="/login/reset_password/:key" component={ResetPwd}></Route>
<Route exact path="/portal" component={Portal}></Route>
</Switch>
</BrowserRouter>
</div>
);
}
and the following is the "Portal" component:
class Portal extends React.Component {
render = () => {
return (
<BrowserRouter basename="/main">
<div className="navmenu">
<NavLink to="messaging" activeClassName="selected">Messaging</NavLink>
<NavLink to="files" activeClassName="selected"></NavLink>
<NavLink to="payledger" activeClassName="selected"></NavLink>
</div>
<div className="apparea">
<Switch>
<Route path="/messaging" component={Messaging}></Route>
<Route path="/files" component={Files}></Route>
<Route path="/payledger" component={PayLedger}></Route>
</Switch>
</div>
</BrowserRouter>
);
}
}
When the portal component is loaded and I refresh the web page, the page goes blank. I am assuming that this has something to do with the nested routing? Any help on how to fix it would be much appreciated.
You don't need two <BrowserRouter />. Just define one <BrowserRouter /> in your top level component.
In react-router-dom v4+ the <Route /> is just like a regular component and you can use it inside your components to render UI when the path matches the URL.
Here is the working codesandbox example.
Make sure not to put exact on your parent <Route /> because when you have child routes like /main/messaging the <Route exact path="/main" /> never gets to render and therefore children of that route can't be rendered also.
You keep your <Main /> component as is but remove the exact from the <Route path='/portal' /> and change the <Portal />.
class Portal extends React.Component {
render = () => {
return (
<React.Fragment>
<div className="navmenu">
<NavLink to="/portal/messaging" activeClassName="selected">Messaging</NavLink>
<NavLink to="/portal/files" activeClassName="selected"></NavLink>
<NavLink to="/portal/payledger" activeClassName="selected"></NavLink>
</div>
<div className="apparea">
<Switch>
<Route path="/portal/messaging" component={Messaging}></Route>
<Route path="/portal/files" component={Files}></Route>
<Route path="/portal/payledger" component={PayLedger}></Route>
</Switch>
</div>
</React.Fragment>
);
}
}
I would like to make a navbar with different Links to different routes. In another file, I have the react-router stuff in order to change the website. But when I press on the links it works but only if I reload afterward.
The head file:
export default function Head(props){
return(
<Router>
<div className="Head">
<div className="HeadItemFirst">bwftp</div>
<div className="HeadPaths">
<Link className="HeadItem" to="/"><div>Start</div></Link>
<Link className="HeadItem" to="/about"><div>about</div></Link>
<Link className="HeadItem" to="/settings"><div>Settings</div></Link>
</div>
</div>
</Router>
)
}
And the App file:
export default function App(){
return(
<div className="App">
<Head />{/* Here are all the links in a navbar stored */}
<Body />
<Foot />
<Router>
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/about" exact component={About}/>
<Route path="/settings" exact component={Settings}/>
<Route render={()=>(<h1>404</h1>)}/>
</Switch>
</Router>
</div>
)
}
You need not use multiple router instances in your Application. Instead have one at the topmost parent level. If you use multiple Routes, the Link components inside Head will communicate with the Router component inside Head only and will not relay the information of route change to Router in App
Also if you render Head as a default Route it will receive all props from Route and will ensure smooth functioning of the Routes
export default function Head(props){
return(
<div className="Head">
<div className="HeadItemFirst">bwftp</div>
<div className="HeadPaths">
<Link className="HeadItem" to="/"><div>Start</div></Link>
<Link className="HeadItem" to="/about"><div>about</div></Link>
<Link className="HeadItem" to="/settings"><div>Settings</div></Link>
</div>
</div>
)
}
export default function App(){
return(
<Router>
<div className="App">
<Route component={Head} /> //Render as a default route so that it gets route params
<Body />
<Foot />
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/about" exact component={About}/>
<Route path="/settings" exact component={Settings}/>
<Route render={()=>(<h1>404</h1>)}/>
</Switch>
</div>
</Router>
)
}
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 a react application in which I have wrapped layout components for the other routes, the thing is when I click the links present in the sidebar(part of layout) they are not being rendered on the screen, here is my code.
App.js
//Imports here
<Provider store={store}>
<Router>
<Switch>
<Layout>
<Route exact path="/admin" render={() => <Admin />} />
<Route exact path="/employees" render={() => <Employees />} />
<Route exact path="/profile" component={Profile} />
</Layout>
<Switch>
</Router>
</Provider>
Layout.js
//imports here
//styling here
<Link to='/employees' />
// and likewise for rest of the routes
When clicking the links ie, employees or profile they aren't being rendered, tried console.log to see if my layout was obstructing that, but no use. Please help me
It should be inside the Switch component but you can wrap it with a Layout component like that.
const Headers = () => (
<Layout>
<ul>
<li>
<Link to="/admin">Admin</Link>
</li>
<li>
<Link to="/profile">Profile</Link>
</li>
<li>
<Link to="/employees">Employees</Link>
</li>
</ul>
</Layout>
);
function App() {
return (
<Router>
<Layout>
<Header></Header>
<Switch>
<Route exact path="/admin" render={() => <Admin />} />
<Route exact path="/employees" render={() => <Employees/>}/>
<Route exact path="/profile" component={Profile} />
</Switch>
</Layout>
</Router>
);
}
If your URL is changing but the content is not being rendered, the problem is this, apart from wrapping the Routes as mentioned in #G.aziz 's answer since the routes are children WRT layout components we have to use {props.children} inside the layout component to render the content like so...
Layout.jsx
<div>
<Sidebar />
<Navbar />
{props.children} // here we are rendering the routes which we mentioned in the switch component in App.js
</div>
For me this solution fixed. Also please refer this question for further information. React-router v4, URL changing but component doesn't render