I've been working with React Router and trying to route my App.js and Car.js components together. I wrote {this.props.children} in those two components but it still isn't working. There is no where on my local host page that shows any indication of the Car.js component when I deploy my app.
Here's my App.js:
import React, { Component } from 'react';
import Login from './Login.js';
import Search from './Search.js';
import Message from './Message.js';
import Car from './Car.js';
import {BrowserRouter, Route} from 'react-router-dom';
export default class App extends React.Component {
render() {
return (
<div>
<Login />
<Search />
<Message />
<div>
<BrowserRouter>
<Route path="/Car" component={Car}/>
</BrowserRouter>
{this.props.children}
</div>
</div>
);
}
}
Car.js:
// Car page example
import React, { Component } from 'react';
import {Router, Route} from 'react-router';
class Car extends Component {
render(){
return(
<div>
<h1> Cars page </h1>
{this.props.children}
</div>
);
}
}
export default Car;
So you're going to want at least 2 routes unless /Cars is the only page in which case you don't need routing! :)
In this example the Home component will be displayed when your url is something like http:/www.exmaple.com/
The Cars component will be displayed when the url is http:/www.exmaple.com/Cars
const App = () => (
<div>
<Login />
<Search />
<Message />
<div>
<BrowserRouter>
// you're going to want a default view
<Route exact path="/" component={Home} />
// this will be displayed when your url has /Car at the end of it
<Route path="/Car" component={Car} />
</BrowserRouter>
</div>
</div>
);
If you don't want to have to manually type in the urls to change the views... You will have to include a <Link /> or a <NavLink /> that points to the respective view.
Try <NavLink to="/Cars" /> and don't forget to add { ... NavLink ... } from "react-router-dom" as well.
You might want to have a look at react-router WEB documentation over at ReactTraining.com's react-router page. They're the people who created and maintain react-router. Good documentation as well!
Related
I have been receiving white blank pages when trying to create multiple pages within my app and I have been using the router-dom to try and fix this but still can't understand why. Here is my code with Home and Navigation js being inside a components folder in the src directory and App.js just inside the src directory.
App.js
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Glazing from './components/Glazing';
import Navigation from './components/Navigation';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Navigation />
<Route path="/" component={Home} exact/>
<Route path="/glazing" component={Glazing}/>
</div>
</BrowserRouter>
);
}
}
export default App;
Nav.js
import React from 'react';
import { NavLink } from 'react-router-dom';
const Navigation = () => {
return (
<div>
<NavLink to="/">Home</NavLink>
<NavLink to="/glazing">Glazing</NavLink>
</div>
);
}
export default Navigation;
Home.js
import React from "react";
import logo from '../logo.svg';
import './Home.css';
import "#fontsource/dm-sans";
function home() {
return (
<div className="Home">
<header className="Home-header">
<h1>EPC RATING PREDICTOR</h1>
</header>
<button> GET STARTED</button>
</div>
);
}
export default Home;
If you are using react-router-dom#6 then there are a couple things you need to address.
The Switch component was replaced by the Routes component and all Route components must be wrapped/rendered directly by Routes, or another Route component in the case of nesting routes.
The Route component API changed; gone are the component, and render and children function props, all replaced by a single element prop taking a ReactNode, a.k.a. JSX, value.
Example:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import Glazing from './components/Glazing';
import Navigation from './components/Navigation';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/glazing" element={<Glazing />} />
</Routes>
</div>
</BrowserRouter>
);
}
}
See the Upgrading from v5 guide for other changes.
I'm trying to create a website in react and am using router-dom to have the correct url showing.
I have a navbar that links to an about page using Link to="" and then using Switch and Route to display the component for the correct path, but it doesn't work.
Not sure if I missed anything here but I can't manage to display any components.
This is my PageContainer
import React from "react";
import { Route, Switch } from "react-router-dom";
import Alphabet from "./Alphabet";
import About from "./About";
export default class PageContainer extends React.Component {
render() {
return (
<section className="pagecontainer">
<Switch>
<Route exact path="/omoss">
<About />
</Route>
<Route exact path="/">
<Alphabet />
</Route>
</Switch>
</section>
);
}
}
This is my navbar
import React from "react";
import { Link } from "react-router-dom";
export default class Navbar extends React.Component {
render() {
return (
<section>
<section className="navbar">
<Link to="/">Hem</Link>
<Link to="/omoss">OM OSS</Link>
</section>
</section>
);
}
}
UPDATE:
Removed BrowserRouter from both components above.
Changed App.js to below.
App.js
import React from "react";
import "./App.css";
import { BrowserRouter } from "react-router-dom";
import Navbar from "./components/Navbar";
import PageContainer from "./components/PageContainer";
function App() {
return (
<BrowserRouter>
<section className="App">
<Navbar />
<PageContainer />
</section>
</BrowserRouter>
);
}
export default App;
Still not working though. The url changes but the components doesn't show.
UPDATE 2
Think I solved it when I removed two other components that where showing in Switch inside PageContainer but weren't in a Route. I had removed them before uploading here but forgot them in my code
You have two individual <BrowserRouter /> components, each with its own state. I suggest that you move the <BrowserRouter /> component to a common ancestor of both <Navbar /> and <PageContainer /> so that they can share the same history object.
For example, remove the BrowserRouter from your components and place it higher in the component hierarchy. Now, both <Navbar /> and <PageContainer /> are in the scope of the same <BrowserRouter />
function App() {
return (
<BrowserRouter>
<Navbar />
<PageContainer />
</BrowserRouter>
);
}
Try to add BrowserRouter in App.js
import React from "react";
import "./App.css";
import { BrowserRouter } from "react-router-dom";
import Navbar from "./components/Navbar";
import PageContainer from "./components/PageContainer";
function App() {
return (
<BrowserRouter>
<section className="App">
<PageContainer />
<Navbar />
</section>
</BrowserRouter>
);
}
export default App;
I have this index.js:
<Provider store={store}>
<Router history={history}>
<App/>
</Router>
</Provider>
this App.js:
<Switch>
<Route exact path="/" component={Home} />
<Route
path="/login"
render={() => <Login userError={this.state.userError} />}
/>
<Route path="/registration" component={Registration} />;
</Switch>
and Home.js:
<div className="Home">
<Header/>
<div className="content">
<Sidenav/>
<Switch>
<Route path="/friends" component={Friends}/>
</Switch>
<Feed/>
</div>
</div>
I want Friends component to be rendered inside content block, but now if I try to reach /friends route via Link I am getting blank page. If I set /friends Route in App.js, it will be OK, but I won't have it in my content class, because it will be another page.
May you give me a hand with that?
Also in feature I will be have more items to display in content, that's why I put Switch in Home.js
Thanks in advance!
Move your content class and <Friends>
The issue you're having is that the component Home is not rendering when you visit /friends because it will only render when you go to /
To fix this just move the Route into the App.js file, along with the content class into the Friends component.
To make this easier, you could make your content class into a component. This way you could wrap it around all of the stuff you render.
Or move <Friends> and wrap content
What I mean by this is that you could also create your own Route component that wraps whatever component passed to it in a Content component. It might look similar to this:
const ContentRoute = ({ component, ...props }) => (
<Route {...props} component={() => (
<Content>
<component />
</Content>
)}>
</Route>
)
You can access demo here
Here what I have done. This demonstrates how to set layout when page's changing.
- src/
-- components/
--- Header.js
--- Sidenav.js
-- pages/
--- Home.js
--- Login.js
--- withBase.js
-- App.js
-- BaseLayout.js
-- routes.js
At first, let's make dummy components.
components/Header
import React from 'react';
export default () => (
<div>
This is Header.
</div>
);
components/Sidenav
import React from 'react';
export default () => (
<div>
This is Sidenav.
</div>
);
Then, pages.
pages/Home
import React from 'react';
import { NavLink } from 'react-router-dom';
import withBase from './withBase';
const Home = () => (
<div>
<p>Welcome Home!!!</p>
<NavLink to="/login">Go to login page</NavLink>
</div>
);
export default withBase(Home);
pages/Login
import React from 'react';
import { NavLink } from 'react-router-dom';
import withBase from './withBase';
const Login = () => (
<div>
<p>You have to login here...</p>
<NavLink to="/">Go home</NavLink>
</div>
);
export default withBase(Login);
pages/withBase
import React from 'react';
export default WrappedComponent => (
class extends React.Component {
componentDidMount() {
this.props.showHeaderSidenav();
}
render() {
return <WrappedComponent />;
}
}
);
As you see, withBase is a HOC. It runs showHeaderSidenav when the page is mounted.
App
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import BaseLayout from './BaseLayout';
import routes from './routes';
export default class extends React.Component {
state = {
withHeaderSidenav: true
}
showHeaderSidenav = (withHeaderSidenav = true) => {
this.setState({ withHeaderSidenav });
}
render() {
return (
<BaseLayout withHeaderSidenav={this.state.withHeaderSidenav}>
<Switch>
{routes.map(route => (
<Route
exact
key={route.path}
path={route.path}
render={() => (
<route.component
showHeaderSidenav={() => this.showHeaderSidenav(route.withHeaderSidenav)}
/>
)}
/>
))}
</Switch>
</BaseLayout>
);
}
}
BaseLayout
import React from 'react';
import Header from './components/Header';
import Sidenav from './components/Sidenav';
export default ({ withHeaderSidenav, children }) => (
<div>
{withHeaderSidenav && <Header />}
<div className="content">
{withHeaderSidenav && <Sidenav />}
{children}
</div>
</div>
);
We can say that BaseLayout is like a wrapper. It contains dynamic components which will be shown based on withHeaderSidenav prop.
Finally...
routes
import Home from './pages/Home';
import Login from './pages/Login';
export default [
{
path: '/',
component: Home,
withHeaderSidenav: true
},
{
path: '/login',
component: Login,
withHeaderSidenav: false
},
];
You could have moved(declared) content component inside Friends component. I do not see the reason why content component should live outside of Friends component. You can declare content component inside any component that needs it.Content component does not have to mess with routing implementation
I am working on a simple demo React project. I have a Home component which gets rendered when directly placed in main.js but when placed inside the Router in Routes.js, it is not rendered. Can anyone let me know what am I doing wrong here?
main.js file
import React from "react";
import {render} from "react-dom";
import {App} from "./app/App";
import Routes from "./app/Routes";
render( <Routes />,
document.getElementById("root")
)
Routes.js file
import React from "react";
import {
BrowserRouter as Router,
Route,
Switch,
} from "react-router-dom";
import {App}
from "./App";
import Home from "./components/Home";
export default function Routes(props) {
console.log('Routes');
return (
<Router>
<App>
<Switch>
<Route path="/" exact component={Home} />
</Switch>
</App>
</Router>
)
}
App.js file
import React from "react";
import Header from "./components/Header";
export class App extends React.Component {
render() {
console.log("App render");
return (
<div>
<h1> Welcome to React </h1>
<Header/>
</div>
)
}
}
Header.js file
import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
export default class Header extends Component {
render() {
console.log("Header render");
return (
<div>
<NavLink to="/" exact>
Home
</NavLink>
</div>
)
}
}
Home.js file
import React, {Component} from "react";
export default class Home extends Component {
render() {
console.log("Home render");
return (
<div>
<h2>Hello World!</h2>
</div>
)
}
}
This is because you are using App component as the wrapper of whole app, and defined the Switch as the children of App component, so you need to use this.props.children inside App.
Like this:
export class App extends React.Component {
render() {
console.log("App render");
return (
<div>
<h1> Welcome to React </h1>
<Header/>
{this.props.children}
</div>
)
}
}
Consider this example to make the whole picture more clear, if you write:
<App>
<Home />
</App>
Means Home will get passed as children to App component, automatically it will not get rendered inside App, you need to put this.props.children somewhere inside App.
With react-router-v4 which you seem to be using, it is possible to have dynamic Routing which means you can add the Routes within nested components and hence apart from the solution that #MayankShukla suggested you could also keep the <Switch> and other routes within App like
export default function Routes(props) {
console.log('Routes');
return (
<Router>
<App/>
</Router>
)
}
export class App extends React.Component {
render() {
console.log("App render");
return (
<div>
<h1> Welcome to React </h1>
<Header/>
<Switch>
<Route path="/" exact component={Home} />
</Switch>
</div>
)
}
}
You could read more about the advantages of Dynamic Routing here
I'm building a site where each page has a <TopNav>, <Footer> and a <Subfooter>.
As I understand it, the entry point of the app, should include these three components, and an additional component/s should render depending on the route the user is on.
I've built my entry point like so:
App.js
const App = () => (
<div>
<TopNav />
<Footer />
<Subfooter />
</div>
)
index.js
ReactDOM.render(
<App />,
document.getElementById('root')
);
The problem with the way I've structured this is that I can't render anything in between <TopNav> & <Footer>. Should I do something like this in App.js and somehow inject the proper components into <PageContent> based on the route?
App.js
const App = () => (
<div>
<TopNav />
<PageContent />
<Footer />
<Subfooter />
</div>
)
Also, all each component in app requires a router as they all contain <nav> - where should I be defining the <Router> for all three of these components?
What is the correct approach to adding any necessary component between the three listed in App.js - and where should the routing code go to dictate the behavior for all three of these components?
One way of doing this could be:-
Routes.js
import React,{ Component } from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import App from './components/app';
import SomeComponent from './components/some-component';
import AnotherComponent from './components/another-component';
const taskRouter = (
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={SomeComponent} />
<Route path="/another" component={AnotherComponent} />
</Route>
</Router>
);
export default taskRouter;
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Routes';
ReactDOM.render(<Router/>, document.getElementById('root'));
Finally inside App.js
const App = (props) => (
<div>
<TopNav />
{props.children}
<Footer />
<Subfooter />
</div>
)
All route components will render themselves inside props.children.
Hope that helps.