我有以下代码 -
import React, {Component} from 'react';
import MainBar from './MainBar';
import Home from './Home';
import {Router, Route, Redirect, Link} from 'react-router'
class Main extends Component {
render() {
return (
<div className="container-home">
<MainBar/>
<Route path='/main/home' component={Home}/>
</div>
)
}
}
export default Main;
app.js文件中的主要路由器 -
render() {
return (
<BrowserRouter>
{(this.state.loggedIn) ?
<Switch>
<Route path="/main" component={Main}/>
<Route path="/login" component={Login}/>
<Route path="/register" component={Register}/>
<Redirect exact from="*" to="/Main"/>
</Switch>
:
<Switch>
<Route path="/login" component={Login}/>
<Route path="/register" component={Register}/>
{/*comment on next line !!*/}
<Route path="/main" component={Main}/>
<Redirect exact from="*" to="/login"/>
</Switch>
}
</BrowserRouter>
)
}
}
当用户输入'/main'
网址时,他可以查看此组件。
但由于某些原因,在键入'/main/home'
时,嵌套组件仍然不可用。
我写这个网址的方式有些问题吗?