反应嵌套路线问题

时间:2017-08-20 20:07:59

标签: reactjs react-router react-router-v4

我有以下代码 -

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'时,嵌套组件仍然不可用。 我写这个网址的方式有些问题吗?

0 个答案:

没有答案