我正在尝试在导航栏上应用填充/边距,以便链接之间具有一定的空间。
我尝试重命名const,但是它本身冲突,因为我不能在一个文件中使用两次标识符。解析错误:标识符“ Route”已经声明。
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import Projects from "./components/Projects";
import About from "./components/About";
import Contact from "./components/Contact";
import Error from "./components/Error";
import Navigation from "./components/Navigation";
class App extends Component {
render() {
return (
<BrowserRouter>
<Navigation />
<Switch>
<Route path="/" component={ Home } exact />
<Route path="/Projects" component={ Projects } />
<Route path="/About" component={ About } />
<Route path="/Contact" component={ Contact } />
<Route component={ Error } />
</Switch>
</BrowserRouter>
);
}
}
export default App;
import React from 'react';
import { NavLink } from "react-router-dom";
import { NavItem} from '../style/Navigation.style';
const Navigation = () => {
return (
<NavItem>
<NavLink to="/">Home</NavLink>
<NavLink to="/Projects">Projects</NavLink>
<NavLink to="/Contact">Contact</NavLink>
<NavLink to="/About">About</NavLink>
</NavItem>
);
};
export default Navigation;
import styled from 'styled-components';
import {NavLink} from "react-router-dom";
export const NavItem = styled(NavLink)`
Display: Flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
Margin: 10px;
padding: 10px;
`;
import React from "react";
const Home = () => {
return (
<div>
<p>Home</p>
</div>
);
};
export default Home;
[到目前为止是这样的] https://i.stack.imgur.com/X4pKv.png
答案 0 :(得分:0)
主要问题是您尝试设置Navlink
的样式,然后尝试将Navlinks
显示为“样式化的Navlink”的子项...
import styled from 'styled-components';
export const NavItem = styled.div` // just style a div here... (or section etc...)
display: flex;
justify-content: space-around; // this should give you an equal emaout of space between the links...
align-items: center;
`;
答案 1 :(得分:0)