React router v4 рендеринг проблема - PullRequest
0 голосов
/ 21 февраля 2019

Я делаю SPA отдельно со страницей входа, но мне не удалось перенаправить на страницу входа, адресная строка была изменена после нажатия кнопки выхода, но она не отображала содержимое страницы входа.

Версия:

  • NPM -> 6.4.1
  • React-Router -> 4
  • create-Reaction-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>
    );
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...