今天写react路由发现怎么都是不显示的,但是看调试器是有对应的路由组件的,代码大约是下面这个样子的
render() { return ( <div> <div className="head">react router demo</div> <div className="nav"> <NavLink className="about" to="/about"> about| </NavLink> <NavLink className="home" to="/home"> home </NavLink> </div> <div className="content"> <Switch> <Redirect to="/about"></Redirect> <Route path="/about" Component={About}></Route> <Route path="/home" Component={Home}></Route> </Switch> </div> </div> );
不知道上述代码大家发现了几处错误,首先,
<Route path="/about" Component={About}></Route>的
Component这个属性是识别大小写的,如果不是全小写, 作用失效,
第二点就是,redirect必须要放在路由的最后一行,不然是无法正常显示的
以上就是本次踩坑总结,供新手们学习