別のログインページReactでHashRouterを使用する

Question

私は親としてAppを持たないログインページを追加したいと思います。

<Provider store={ store }> 
    <HashRouter> 
     <div> 
     <Route path='/login' component={ Login } /> 
     <App> 
      <Route path='/path1' component={ Component1 } /> 
      <Route path='/path2' component={ Component2 } /> 
      <Route path='/path3' component={ Component3 } /> 
     </App> 
     </div> 
    </HashRouter> 
    </Provider> 

それから私は、アプリケーション上のログインページを取得する：私はこれを行う場合は

<Provider store={ store }> 
    <HashRouter> 
     <App> 
     <Route path='/path1' component={ Component1 } /> 
     <Route path='/path2' component={ Component2 } /> 
     <Route path='/path3' component={ Component3 } /> 
     </App> 
    </HashRouter> 
    </Provider> 

：これは私の現在のHashRouterのセットアップです。ここに私のアプリのコンポーネントです：

const App = ({ children }) => (
    <div> 
    <Navbar/> 
    <div className='col-md-10 col-md-offset-1'> 
     { children } 
    </div> 
    </div> 
) 

アプリケーションが含まれていませんログイン成分とログインパスを取得するための最良の方法は何ですか？

Answer 1

反応ルータv4を使用しているので、ネストしたルートをネストするのではなく、親コンポーネントの内部に配置する必要があります。説明はthis answerを参照してください。

あなたの場合、最も簡単なアプローチは、このようなものになります。

<Provider store={ store }> 
    <HashRouter> 
    <div> 
     <Switch> 
     <Route path='/login' component={ Login } /> 
     <Route path='/' component={ App } /> 
     </Switch> 
    </div> 
    </HashRouter> 
</Provider> 

const App =() => (
    <div> 
    <Navbar/> 
    <div className='col-md-10 col-md-offset-1'> 
     <Route path='/path1' component={ Component1 } /> 
     <Route path='/path2' component={ Component2 } /> 
     <Route path='/path3' component={ Component3 } /> 
    </div> 
    </div> 
) 

どのように私は'/login'と'/'ルートをラップする<Switch>を使用していることに注意してください。これにより、指定された順序に従って、指定されたルートから最初に一致するルートのみがレンダリングされます。したがって、パスが'/login'の場合、Loginページが表示されます（完全一致ではなく、完全一致の場合は'exact' attributeを使用する必要があります）。'/'ルート。

更新：

方法上記は反応し、ルータのドキュメントで推奨されるアプローチです。しかし、すべてのルートを1か所に保存する価値がある場合は、すでに持っているものに<Switch>を使用することができます。

<Provider store={ store }> 
    <HashRouter> 
    <div> 
     <Switch> 
     <Route path='/login' component={ Login } /> 
     <App> 
      <Route path='/path1' component={ Component1 } /> 
      <Route path='/path2' component={ Component2 } /> 
      <Route path='/path3' component={ Component3 } /> 
     </App> 
     </Switch> 
    </div> 
    </HashRouter> 
</Provider> 

Answer 2

非常に基本的なメインレイアウトでさまざまなレイアウトを使用できます。

routes.js

export default() => (
    <Route path="/" component={Layout}> 
     <Route component={WebLayout}> 
      <IndexRoute component={Home} /> 
     </Route> 
     <Route component={AppLayout}> 
      <Route path="account" component={Account} /> 
     </Route> 
     <Route component={SecurityLayout}> 
      <Route path="login" component={Login} /> 
     </Route> 
    </Route> 
); 

layout.js

const Layout = ({ children }) => (
    <div> 
     {children} 
    </div> 
); 

applayout.js

const AppLayout = ({ children }) => (
    ... 
); 

securitylayout.js

const SecurityLayout = ({ children }) => (
    ... 
);