This question already has answers here:
Next.js: Error: React.Children.only expected to receive a single React element child
(8 answers)
Closed 10 months ago.
I get this Error creating blog in NextJS. Error: Multiple children were passed to with href of / but only one child is supported
What am i doing wrong here ?
===============================
Server Error
Error: Multiple children were passed to with href of / but only one child is supported https://nextjs.org/docs/messages/link-multiple-children
This error happened while generating the page. Any console logs will be displayed in the terminal window.
<nav className={styles.main-nav}>
<ul>
<Link href='/'> <li>Home</li></Link>
<Link href='/about'> <li>About</li></Link>
<Link href='/blog'> <li>Blog</li></Link>
<Link href='/contact'> <li>Contact</li></Link>
</ul>
</nav>
Inside 'Link' component must be 'a' tag
<ul>
<li> <Link href='/'> <a>Home</a> </Link> </li>
<li> <Link href='/about'> <a>About</a> </Link> </li>
<li> <Link href='/blog'> <a>Blog</a> </Link> </li>
<li> <Link href='/contact'> <a>Contact</a> </Link> </li>
</ul>
Related
I've created a component that outputs a navigation menu.
I'm calling this component from within another component that outputs a website header.
export default function HeaderNav() {
return(
<nav className={styles.headerNav}>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/tests/test001">Test 1</Link>
</li>
<li>
<Link to="/tests/test002">Test 2</Link>
</li>
<li>
<Link to="/tests/test003">Test 3</Link>
</li>
</ul>
</nav>
)
}
I've found that React is wrapping my navigation component in a parent div:
https://imgur.com/a/7gXEJ1F
The addition of this wrapping div creates problems for styling. Especially when it comes to layout for the header.
Ideally I'd like to additional wrapper to not exist. But if there's no way to prevent it from existing, then giving it a classname might help to reduce the issues for styling it.
How can I do either of these things?
Enclose your navigation component between <React.Fragment></React.Fragment> or with shorthand <></>. To further read about React.Fragment
I'm trying to create navigation between some categories while changing the link on click
I need to get this localhost/blog/category/:category1 it works for the first category selected but when I click again I get this localhost/blog/category/blog/category/:category2.
I'm using LINK for redirection
<Link
className="nav-link"
aria-current="page"
to={`blog/category/${item}`}
>
thank you
try this :
<Link
className="nav-link"
aria-current="page"
to={`/blog/category/${item}`}
>
Using react router v4 with react 16.5.2, started with create-react-app,
receiving warnings on load and using the router, would appreciate any advice on the subject,
the repeating warnings are:
index.js:2178 Warning: You should not be using this.context.router.history directly. It is private API for internal use only and is subject to change at any time. Instead, use a <Route> or withRouter() to access the current location, match, etc.
index.js:2178 Warning: You should not be using this.context.router.location directly. It is private API for internal use only and is subject to change at any time. Instead, use a <Route> or withRouter() to access the current location, match, etc.
Warning: You should not be using this.context.router.match directly. It is private API for internal use only and is subject to change at any time. Instead, use a <Route> or withRouter() to access the current location, match, etc.
index.js:2178 Warning: You should not be using this.context.router.staticContext directly. It is private API for internal use only and is subject to change at any time. Instead, use a <Route> or withRouter() to access the current location, match, etc.
The full component code:
return (
<header className="header">
<div className="header__title">menu here</div>
<nav className="mq-navigation">
<ul className="mq-navigation__list">
<li className="mq-navigation__item">
<button className="mq-navigation__item" onClick={()=>this.setMainSize('d','p')}>Desktop</button>
</li>
<li className="mq-navigation__item">
<button className="mq-navigation__item" onClick={()=>this.setMainSize('t','l')}>Tablet l</button>
</li>
<li className="mq-navigation__item">
<button className="mq-navigation__item" onClick={()=>this.setMainSize('t','p')}>Tablet p</button>
</li>
<li className="mq-navigation__item">
<button className="mq-navigation__item" onClick={()=>this.setMainSize('m','l')}>Mobile l</button>
</li>
<li className="mq-navigation__item">
<button className="mq-navigation__item" onClick={()=>this.setMainSize('m','p')}>Mobile p</button>
</li>
</ul>
</nav>
<nav className="lessons-navigation">
<ul className="lessons-navigation__list">
<li className="lessons-navigation__item">
<NavLink to="/Lesson_1" className="lessons-navigation__link" activeClassName="active">Lesson 1</NavLink>
</li>
<li className="lessons-navigation__item">
<NavLink to="/Lesson_2" className="lessons-navigation__link">Lesson 2</NavLink>
</li>
<li className="lessons-navigation__item">
<NavLink to="/Lesson_3" className="lessons-navigation__link">Lesson 3</NavLink>
</li>
</ul>
</nav>
</header>
<main className="bkg-crop">
<div className={`stage stage-device--${this.state.currentResolution} stage-orientation--${this.state.orientation}`}
//dangerouslySetInnerHTML={{__html: sanitizeHtml(thisIsMyCopy)}}
>
<p>more html</p>
<Route path="/:page" render={(props) => {console.log(props,props.location.pathname,props.match.params.page);}} />
</div>
</main>
</Router>
</div>
);
enter code here
<ul>
<li>
<Link to={'/home'}>
Home
</Link>
</li>
<li>
<Link to={'/story'}>
About us
</Link>
</li>
</ul>
I have above navigation tab in reactjs and I would like to toggle active class on click between links. I have been go through on various stacks but not able to find proper answer for above scenerio.
One can use react-router/web#NavLink instead react-router/web#Link.
Attach the class that you want to use as a active class using activeClassName property of NavLink.
<ul>
<li>
<NavLinkto={'/home'} activeClassName="selected">Home</NavLink>
</li>
<li>
<NavLinkto={'/story'} activeClassName="selectedSec">About us</NavLink>
</li>
</ul>
I have a page inside pages so, if you go to direct URL then it will print console.log once and if you go there with then it is printing twice.
Why it is happening?
I want to perform some task once per page.
<Link route={href} href={href}>
<a href={href}>
page to redirect
</a>
</Link>
I already go through with this issue https://github.com/zeit/next.js/issues/253 but still I am not clear
I am using next-routes package for <Link>
<Link to={href} href={href}>
<a>
page to redirect
</a>
</Link>
remove href on <a /> and replace route to to on <Link/>