我想知道ReactJS中根据URL更新组件内容的最佳实践是什么。假设我有一个带有一些按钮的导航栏。我想显示一些按钮,具体取决于URL。
例如,当URL为/home
时,我希望导航栏为:
<nav>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</nav>
[当我需要/about
时
<nav>
<button>Button 2</button>
</nav>
我的主要组成部分是:
<Router>
<Header />
<Switch>
<Route path="/home">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
</Router>
所以我的导航栏位于<Header/>
组件中。我的第一个猜测是使用react-router
获取当前网址,然后更改<Header/>
render() {
let buttons
if(location === "/home") {
buttons = <button>Button 1</button><button>Button 2</button><button>Button 3</button>
} else {
buttons = <button>Button 2</button>
}
return (
<nav>
{buttons}
</nav>
)
}
这是一个好习惯吗?有没有更好的办法?我应该使用react-redux
进行条件渲染吗? (我是react-redux
的新手,正在尝试查看所有可能性)
P.S .:代码并不完美,因为我很快在消息框中直接键入了代码,对此表示遗憾。
您可以使用三元运算符,尽管您现在的实现没有问题
import React,{Fragment,Component} from 'react';
import { useLocation} from "react-router-dom";
class Header extends Component{
let location = useLocation();
render() {
return (
<nav>
{
location.pathname==='/home'?
(<Fragment>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</Fragment>): (<Fragment>
<button>Button 2</button>
</Fragment>)
}
</nav>
)
}
}
}
并且在您的主要组件中,您还可以使用Route
中的react-router-dom
import React,{Component} from 'react';
import {BrowserRouter as Router,Route,Switch} from "react-router-dom";
import Home from './Home';
import About from './About';
class App extends Component{
render(){
return(
<Router>
<Header />
<Switch>
<Route to="/home" component={Home}/>
<Route to="/about" component={About}/>
</Switch>
</Router>
);
}
}
}
再次,这只是个人喜好,而不是其他任何事情,但肯定可以使事情简单一些