I am creating a project in react but I came across a problem when creating the responsive menu. That is, when using a menu that uses href it does not work on the apache server and Link To does not solve my problem. I have this code:
return (
<div>
<ResponsiveMenu
menuOpenButton={<FaBars size={30} color="MediumPurple" />}
menuCloseButton={<FaRegWindowClose size={30} color="MediumPurple" />}
changeMenuOn="500px"
largeMenuClassName="large-menu"
smallMenuClassName="small-menu"
menu={
<Menu>
<ul>
<li>INICIO</li>
<li>PROJETO</li>
<li>PARCERIA</li>
<li>PLANTAS & LÃ</li>
<li>RECURSOS</li>
<li>CONTACTOS</li>
</ul>
</Menu>
}
/>
</div>
);
Related
My MapBox Map is working well in development(localhost) but when I deployed the map is not loading the map.
<ReactMapGL
{...viewPort}
mapboxApiAccessToken={process.env.REACT_APP_MAP_BOX_TOKEN}
onViewportChange={setViewPort}
// zoom={13}
mapStyle={process.env.REACT_APP_MAP_BOX_STYLE}
scrollZoom={true}
touchZoom={true}
>
<Marker
longitude={marker.longitude}
latitude={marker.latitude}
offsetTop={-20}
offsetLeft={-10}
draggable
onDragStart={onMarkerDragStart}
onDrag={onMarkerDrag}
onDragEnd={onMarkerDragEnd}
followUserLocation={true}
followUserMode="course"
>
<Pin size={20} />
</Marker>
<GeolocateControl
style={geolocateStyle}
positionOptions={positionOptions}
trackUserLocation
auto
/>
{/* <div className="nav" style={navStyle}>
<NavigationControl showCompass />
</div> */}
</ReactMapGL>
I'm using react-map-gl npm package.
IN LOCALHOST(This is not my location😉)
IN PRODUCTION
NB: I've added Private Token and added URL also in MapBox.
ERROR MESSAGE IN CONSOLE
I JUST DOWNGRADED THE MAPBOX VERSION. NOW IT IS WORKING
i have an api "xyz.com/products/" and i have made an route xyz.com/products/1. This will give me an product with the id 1 . And it will render product page Component with that product details...But now on that particular product page i have an gallery of related product with their own individual "Link" to open in same product page . but when i click on any one of them ....the url changes like this "xyz.com/product/1/23" but i want only to change path like "xyz.com/products/1" --> "xyz.com/products/23"
here is my code snippets
// ///// route and link both are on App Component/////////////////
// this is the route that i have that matches xyz.com/product/1
<Route
path="/product/:id"
render={() => (
<Fragment>
<ProductContext.Provider value={{ productState, productStateDispatch }}>
<Product />
<div className={`overlay ${productState.packageSidebar}`}></div>
</ProductContext.Provider>
</Fragment>
)}
/>;
these are links will go on product page
<Row title="Our best seller">
{homeState.bestSellerProducts.map((product, index) => (
<Link
to={{
pathname: `/product/${product.id}`,
search: `type=${product.type}`,
}}
className="product-link"
key={index}
>
{" "}
<Card {...product} />
</Link>
))}
</Row>
//////////////////////////////
// this is in my product component where i have used one more component called imageGallery inside it. in which we have links////////////
{images.map((imgObj, index) => {
console.log(imgObj);
return (
<div className="item" key={index}>
<Link to={`/${imgObj.id}`} className="product-link">
<div className="img">
<img
height={100}
width={100}
src={imgObj.product_image}
alt="product-img"
/>
</div>
</Link>
</div>
);
})}
// i know i messing in routing i hope will get solution.... i just want that when i click on any link in this imageGallery component .it should be open inside same product page in which i m already present.. thats it
Including exact keyword in the Route component might solve your problem, try out!, demo example:
<Route exact to='/' component={home} />
Hi i try to animate 2 routes form opacity 1 to 0 on exit. But for some reason on <Link> click the routes will change(ex. '/' => '/chat?name=bob&room=here') but the page content stay the same and it wont render the component of that specific route. Also the animation is working great once i use the "Go back button" from browser.
Anyone have idea why is not working on button click?
App.js
return (
<div>
<Router>
<AnimatePresence exitBeforeEnter>
<Switch location={location} key={location.key}>
<Route path="/" exact component={Login}></Route>
<Route path="/chat" component={ChatRoom}></Route>
</Switch>
</AnimatePresence>
</Router>
</div>
);
Login.js
return (
<motion.div
initial="out"
animate="in"
exit="out"
variants={pageTransition}
className="Login-Container"
>
//same code
<Link
onClick={(event) => (!name || !room ? event.preventDefault() : null)}
to={`/chat?name=${name}&room=${room}`}
>
<button
type="submit"
className="Login-Button"
>
Sign In
</button>
</Link>
</motion.div>
);
ChatRoom.js
return (
<motion.div
initial="out"
animate="in"
exit="out"
variants={pageTransition}
className="ChatRoom-Container"
>
<div className="ChatRoom-NavBar">
<NavLink to="/">
<div
className="ChatRoom-BackButton"
style={{ backgroundImage: `url(${arrow})` }}
></div>
</NavLink>
</div>
</motion.div>
);
};
Your initial and exit prop on motion.div seem to be using the same key i.e "out" try giving the exit prop a different key. Dont forget to adjust your variants as well when you make the change.
I'm using the latest versions of react and semantic-ui-react
I have this Iconelement set up from semantic implementing navigation to an external link (github)
<Menu.Item
position="right"
to="https://github.com"
as={Link}
>
<Icon name="github" size="big" />
</Menu.Item>
When I click the icon in my UI, it's trying to append the github url to the url of my UI. So I'm at localhost:blah/someUrl it's requesting localhost:blah/someUrl/https://github.com
Is this an issue with routing or misuse of the <Icon> props?
It's rather a misuse of router link: If you want to link to external pages, don't use routers <Link> component.
It will work the following way:
<Menu.Item
href="https://github.com"
position="right"
target="_blank"
>
<Icon name="github" size="big" />
</Menu.Item>
I want render a table from ajax request data. Each row with a action link to enter a edit page.when I click the link, the url on browser was changed,but it can't enter edit page.
In addition, when I click link button, the url on browser is not I except. (It's http://192.168.1.186:4444/table/basic-table2/articles rather than http://192.168.1.186:4444/#/table/basic-table2/articles).
I'm thinking the problem maybe cause by lifecycle of component mounting. Because when I put Link element out side the table(not wait ajax request return), it work well.
I'm new in React, Can anyone finger out where I am wrong？following is the code:
renderOperator = (value, index, record) => {
const edit = <Link exact="true" to="/table/basic-table2/articles">编辑</Link>;
const context = {};
return (
<div>
<Router context={context}>
<span>
{edit}
</span>
</Router>
<a
style={styles.removeBtn}
onClick={this.deleteItem.bind(this, record)}
>
删除
</a>
</div>
);
};
fllowing is the table:
<Table
dataSource={this.state.dataSource}
isLoading={this.state.isLoading}
rowSelection={{
...this.rowSelection,
selectedRowKeys: this.state.selectedRowKeys,
}}
>
<Table.Column title="编码" dataIndex="article_id" width={120} />
<Table.Column title="名称" dataIndex="article_title" width={250} />
<Table.Column title="报名数" dataIndex="enrolled_num" width={160} />
<Table.Column title="访问人数" dataIndex="visited_user_num" width={160} />
<Table.Column title="访问次数" dataIndex="visited_num" width={120} />
<Table.Column title="转载数" dataIndex="reprinted_num" width={120} />
<Table.Column
title="操作"
cell={this.renderOperator}
lock="right"
width={120}
/>
</Table>
I think the issue may be that you're including an instance of <Router /> inside if the <Table.Column />. You shouldn't need to create a separate instance for every <Link />
Try removing the <Router /> inside of renderOperator
It took me a while to understand your question.
Firstly, please check if there is any console errors in your browser. If yes, it may block your UI router to view the page.
Secondly, if you are using react-router, here is a link to the hash router usage: https://reacttraining.com/react-router/web/api/HashRouter. Basically, you need to wrap the routes with <HashRouter>.
Lastly, a few tips to improve your code, not related to your question:
You can use <React.Fragment> to replace your <div> wrapper
You can use items.map() to iterate through the list of Table.Column.