反应路由器v4渲染问题

时间:2019-02-21 07:57:44

标签: javascript reactjs react-router

我正在使用登录页面单独进行SPA,但是我无法路由到登录页面,单击注销按钮后地址栏已更改,但未呈现任何登录页面内容。

版本:

  • NPM-> 6.4.1
  • 反应路由器-> 4
  • create-react-app

文件:index.js

ReactDOM.render(  
  <Router> 
    <Switch> 
      <Route path="/" component={Main} />  
      <Route path="/login" component={AuthenticateLoginPage} />
    </Switch>
  </Router>, 
  document.getElementById("root")
);

Main-> index.js

const SmartCabinet = () => (
  <Switch>
    <Route exact path='/smartcabinet' component={SmartCabinetIndexPage} />
    <Route path='/smartcabinet/:number' component={SmartCabinetEditPage} />
  </Switch>
)

const User = () => (
  <Switch>
    <Route exact path='/user' component={UserIndexPage} />
    <Route path='/user/create' component={UserCreatePage} />
    <Route path='/user/:number' component={UserEditPage} />
  </Switch>
)

render() {   
    return (
        <div>
          <div className="ui menu">
            <div className="right menu">
              <NavLink className="item" exact to="/login">Log out</NavLink>
            </div>
          </div>
          <Grid columns='equal' relaxed={true}>
            <Grid.Column width='2'>
              <div className="sidenav">
                <ul className="header">
                  <li><NavLink exact to="/">Home</NavLink></li>
                  <li><NavLink to="/materialrequest">Material Request</NavLink></li>
                  <li><NavLink to="/smartcabinet">Smart Cabinet</NavLink></li>
                  <li><NavLink to="/user">User</NavLink></li>

                </ul>
              </div>
            </Grid.Column>
            <Grid.Column>
              <div className="mainContent">
                <Switch>
                  <Route exact path="/" component={HomePage} />
                  <Route path="/materialrequest" component={MaterialRequestIndexPage} />
                  <Route path="/smartcabinet" component={SmartCabinet} />
                  <Route path="/user" component={User} />
                </Switch>
              </div>
            </Grid.Column>
          </Grid>
        </div>
    );
  }
}

0 个答案:

没有答案