I am using react-router-dom and react-router-bootstrap to handle routing in my react-typescript-react-bootstrap web app and I am getting the following error:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
Routes#http://localhost:3000/static/js/bundle.js:60069:7
Router#http://localhost:3000/static/js/bundle.js:60006:7
The project isn't throwing any errors but the routing is not responding. Here's the index and components:
index.tsx
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<SiteNav />
<Routes>
<Route path="/home" element={Home} />
<Route path="/about" element={About} />
</Routes>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
SiteNav.tsx
class SiteNav extends Component {
render() {
return (
<div className="Nav">
<Navbar bg="light" expand="lg">
<Container>
<LinkContainer to="/home">
<Navbar.Brand>The Pirate Hostel</Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<LinkContainer to="/home">
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to="/about">
<Nav.Link>About</Nav.Link>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
)
}
}
export default SiteNav;
home.tsx
class Home extends Component {
render() {
return (
<div className="Home">
<body>home</body>
</div>
)
}
}
export default Home;
about.tsx
class About extends Component {
render() {
return (
<div className="About">
<body>About</body>
</div>
)
}
}
export default About;
What am I missing?
edit---- updated with the following but still getting the same error
const About = () => {
<div className="About">
<body>About</body>
</div>
}
export default About
const Home = () => {
<div className="Home">
<body>home</body>
</div>
}
export default Home;
In react-router-dom#6 the Route component's API changed a bit. The element prop takes a ReactNode, i.e. JSX, not a reference to the component.
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
Related
Hello Stackoverflow community
I am building a simple SPA using react. My navigation for the app would be a unauthenticated public page(like home/about/pricing etc) and a sign in button that the user will click on to be redirected into the app components after authentication using keycloak.
The way I have structured the app is having a parent router that will redirection between public facing files and then another router that will help router inside the app. The problem I am facing is my app router works but no HTML is displayed or no components are displayed (dashboard component not displayed)
My app.js file
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import HomePage from "./pages/Homepage";
import AboutPage from "./pages/AboutPage";
import SecuredPage from "./pages/Securedpage";
import PricingPage from "./pages/PricingPage";
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route exact path="/" element={<HomePage />} />
<Route path="/about" element={ <AboutPage />} />
<Route path="/pricing" element={ <PricingPage />} />
<Route exact path="/app" element={ <SecuredPage />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
My HomePage.JS contains
import React from 'react';
import NavMain from "../components/NavMain";
const Home = () => {
return (
<div>
<NavMain/>
<h1 className="text-green-800 text-4xl">Welcome to the Homepage. Some more text123</h1>
</div>
);
};
export default Home;
My NavMain.JS contains
<ul>
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/about">
About
</a>
</li>
<a href="/pricing">
pricing
</a>
</li>
<li>
<a href="/app/dashboard">
app
</a>
</li>
</ul>
The public facing components work correctly. Once I click on 'app' I am redirected to the keycloak authentication page and from there after login I am on the securepage page component. But it does not render the dashboard component
SecuragePage.js
import React from 'react';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { ReactKeycloakProvider } from "#react-keycloak/web";
import keycloak from "../Keycloak";
import Dashboard from "./Dashboardpage";
import AboutPage from "./AboutPage";
import PrivateRoutes from "../helpers/PrivateRoutes";
import NavHomePage from "../components/NavHomePage";
const Loading = () => <div>Loading...</div>
const Secured = () => {
return (
<div>
<ReactKeycloakProvider authClient={keycloak}
initOptions={{
onLoad: "login-required",
}}
LoadingComponent={<Loading />} >
app landing page
<NavHomePage/>
<Routes>
<Route element={<PrivateRoutes />}>
<Route exact path="/app/dashboard" element={ <Dashboard />} />
</Route>
</Routes>
</ReactKeycloakProvider>
</div>
);
};
export default Secured;
Dashboard.js
import React from 'react';
const Dashboard = () => {
return (
<div>
<h1 className="text-green-800 text-4xl">Dashboard</h1>
</div>
);
};
export default Dashboard;
NavHomePage.js
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="/">Hype</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="/app">Home</Nav.Link>
<Nav.Link href="/app/dashboard">dashboard</Nav.Link>
</Nav>
<Nav className="ml-auto">
{!!keycloak.authenticated && (
<Nav.Link onClick={() => logoutHelper()}>
Logout ({keycloak.tokenParsed.preferred_username})</Nav.Link>)}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
PrivateRouters.js
const PrivateRoutes = () => {
const { keycloak } = useKeycloak();
const isLoggedIn = keycloak.authenticated;
console.log("checking auth access " + isLoggedIn);
console.log(keycloak);
return isLoggedIn ? <Outlet/> : null;
};
Try to use
import { Link } from "react-router-dom";
Instead of using or <Nav.Link>.
You can easily wrap these inside of
<Link to='/app'><Nav.Link>Home</Nav.Link></Link>
Check example here: https://reactrouter.com/en/main/components/link
The SecuredPage component is rendering descendent routes, so the parent route must append a wildcard "*" route matcher to it's route so descendent routes can be matched and rendered.
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/pricing" element={<PricingPage />} />
<Route path="/app/*" element={<SecuredPage />} /> // <-- append "*" to path
</Routes>
</BrowserRouter>
</div>
);
}
Descendent Routes components also build their paths relative to any parent Routes components, so the descendent path should not include any of the "path prefix" to this Routes.
const Secured = () => {
return (
<div>
<ReactKeycloakProvider
authClient={keycloak}
initOptions={{
onLoad: "login-required",
}}
LoadingComponent={<Loading />}
>
app landing page
<NavHomePage/>
<Routes>
<Route element={<PrivateRoutes />}>
<Route path="dashboard" element={<Dashboard />} />
</Route>
</Routes>
</ReactKeycloakProvider>
</div>
);
};
If you didn't want to use descendent routes you could convert Secured into a layout route component.
Example:
import { Outlet } from 'react-router-dom';
const KeycloakLayout = () => {
return (
<div>
<ReactKeycloakProvider
authClient={keycloak}
initOptions={{
onLoad: "login-required",
}}
LoadingComponent={<Loading />}
>
<NavHomePage/>
<Outlet />
</ReactKeycloakProvider>
</div>
);
};
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/pricing" element={<PricingPage />} />
<Route path="/app" element={<KeycloakLayout />}>
<Route element={<PrivateRoutes />}>
<Route path="dashboard" element={<Dashboard />} />
</Route>
</Route>
</Routes>
</BrowserRouter>
</div>
);
}
No idea why it doesn't work for you, there should be an example that can be debugged. Learn from this youtube-channel how a good example works:
Youtube tutorial keycloak with react
Nevertheless, I see some things in your code that shouldn't be done like this anymore:
Do not use the react-keycloak/web library. It has not been serviced since 2021 and is no longer needed!
Check out the youtube links for a good example of keycloak authentication with routing without this react library.
Don't use <divs> in your code unless absolutely necessary. If you need divs, then use the <React.Fragments /> or <></> for short. Why is that important? If you want to debug your project in a browser in the future, these divs make the code very cluttered and tedious to debug.
For example here:
const Home = () => {
return (
<> //NO <div> USED
<NavMain/>
<h1 className="text-green-800 text-4xl">Welcome to the Homepage. Some more text123</h1>
</>
);
};
Another code:
function App() {
return (
//DONT USE DIV HERE. USELESSS
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/pricing" element={<PricingPage />} />
<Route path="/app" element={<KeycloakLayout />}>
<Route element={<PrivateRoutes />}>
<Route path="dashboard" element={<Dashboard />} />
</Route>
</Route>
</Routes>
</BrowserRouter>
);
}
I can route to another endpoint, but the component content only appears on manual refresh.
I've seen this question asked here, here, and I've been checking out the reactrouter docs, amongst others. The solution always seems to be "add withRouter" or "make sure you're wrapping it in Router. I've done those things, but sadly got no where.
Here's the code:
App.js
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function App() {
return (
<Router>
<Provider store={store}>
<div className="App">
<NavBar />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
</Switch>
</div>
</Provider>
</Router>
);
}
NavBar.js
import { BrowserRouter as Router, Link } from "react-router-dom";
import { withRouter } from "react-router";
function NavBar() {
return (
<Router>
<div className="navbar">
<h3>Connectory</h3>
<div className="buttons-container">
<Link>
<button>Settings</button>
</Link>
<Link to="/account"> // successfully redirects to /account, but doesn't render Account page content until refresh
<button>Account</button>
</Link>
</div>
</div>
</Router>
);
}
export default withRouter(NavBar);
EDIT: After comment suggestions, here's a code sandbox link and here;s the Account.js page:
import React from "react";
export default function Account() {
return (
<div>
<h3>This is the Account page</h3>
</div>
);
}
The Problem here is that, in your Navbar.js, you are re-setting your Routes again when they are already set in App.js.
<Switch>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} /> // Route for Applicatin set here
</Switch>
You do not need to do that again in. Check here.
https://codesandbox.io/s/gracious-germain-7fyry?file=/src/Navbar.js
Your Nabar should look like:
function NavBar() {
return (
<div className="navbar">
<h3>Connectory</h3>
<div className="buttons-container">
<Link to="/">
<button>Settings</button>
</Link>
<Link to="/account">
<button>Account</button>
</Link>
</div>
</div>
);
}
Hi i found a bug in your code and that's the reason because is not working.
in this component you are injecting the Router to the rest of the app.
function App() {
return (
<Router>
<div className="App">
<NavBar />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
</Switch>
</div>
</Router>
);
}
in this one you are injecting again the Router. That's why is not working you just have to remove the Router from de Navbar and it will work properly.
function NavBar() {
return (
<Router>
<div className="navbar">
<h3>Connectory</h3>
<div className="buttons-container">
<Link>
<button>Settings</button>
</Link>
<Link to="/account">
<button>Account</button>
</Link>
</div>
</div>
</Router>
);
}
like this
function NavBar() {
return (
<div className="navbar">
<h3>Connectory</h3>
<div className="buttons-container">
<Link>
<button>Settings</button>
</Link>
<Link to="/account">
<button>Account</button>
</Link>
</div>
</div>
);
}
I am pretty new to react-router. I created a single page with nav bars that can navigate to the either of two pages. In one of the pages, I have a series of link that should direct to another component. My app component deals with the initial routing
<Router>
<nav className ="nav">
<Link to='/' className="nav__nav-link-logo link"><img src={Logo} className="nav__nav-logo" alt="A figure that depicts school"></img></Link>
<button onClick={this.handleBarClick} className="nav__nav-bar-icon link"><FontAwesomeIcon icon={faBars} /></button>
<div className="nav__text-and-icon" style={{display : this.state.navTextDisplay}}>
<Link to = '/' className="nav__text link"><FontAwesomeIcon icon={faHome} className="icon" /> Home </Link>
<Link to = '/pages/Contact/Contact' className="nav__text link"><FontAwesomeIcon icon={faPhoneAlt} className="icon"/> Contact the Dev</Link>
</div>
</nav>
<Switch>
<Route exact path='/' component = { Home } />
<Route exact path='/' component = { Home } />
<Route path='/pages/Contact' component = { Contact } />
<Route component={NotFoundPage}/>
</Switch>
</Router>
then the home component renders a list of links I want to navigate to another component entirely. PS : this is not about nest routing
my list of links code is
render() {
return (
<Fragment>
{/**
* #param item the indiviual school generated from the API
*/}
{this.state.apiResponse.map((item, index) => {
return (
<Fragment>
<li key={item.schoollid}>
<Link
to="/component/SchoolDetails/SchoolDetails"
className="each-school"
>
<SchoolTemplate item={item} />
</Link>
</li>
<Route
path="/component/SchoolDetails"
render={props => (
<SchoolDetails {...props} details={item} />
)}
// component={SchoolDetails}
/>
</Fragment>
);
})}
</Fragment>
);
But then my routes is linking the individual links to my 404 (not found page)
Try this it worked for me ,
User Navbar React bootstrap plugin for the menu bar navigation ,
npm package: import {Navbar, Nav,NavItem, NavDropdown, MenuItem,Glyphicon, Label} from 'react-bootstrap';
`
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#/Dashboard">
Dashboard
</NavItem>
<NavDropdown eventKey={3} title="Tickets" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>
<NavLink exact to={ "/Home"}>Home</NavLink>
</MenuItem>
<MenuItem eventKey={3.2}>
<NavLink exact to={ "/Gallary"}>Gallary</NavLink>
</MenuItem>
</Nav>
</NavDropdown>
</Navbar.Collapse>
<NavDropdown eventKey={3} title="Tickets" id="basic-nav-dropdown">
<MenuItem eventKey={3.1} ><NavLink exact to={"/Home"} >Home</NavLink></MenuItem>
<MenuItem eventKey={3.2}><NavLink exact to={"/Gallary"}>Gallary</NavLink></MenuItem>
</Nav>
npm package:
import {Route, BrowserRouter,NavLink,HashRouter , Switch} from 'react-router-dom';
`
try this.
class APIRoutes extends React.Component {
...
render() {
return (
<Switch>
{this.state.apiResponse.map((item, index) => {
return (
<Fragment>
...
<Route
path="/component/SchoolDetails"
render={props => (
<SchoolDetails {...props} details={item} />
)}
/>
</Fragment>
);
})}
</Switch>
);
}
And the component that have Router
<Router>
...
<Switch>
<APIRoutes />
<Route exact path='/' component={Home}/>
<Route path='/pages/Contact' component={Contact}/>
<Route component={NotFoundPage}/>
</Switch>
</Router>
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>
)
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>
);
}
}