サーバ上のreact-router-dom

Question

サーバ上で自分のアプリケーションをレンダリングしているときに使用できないことが分かりました。私は状況に応じて特定のルータにアプリケーションをラップしたいと思います--Client側のBrowserRouterとサーバー側のStaticRouter。私のアプリは、次のようになります。

imports.... 
const renderApp =() => (
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
     <App/> 
    </BrowserRouter> 
    </Provider> 
) 

const root = document.getElementById('app') 
render(renderApp(), root) 

をだから私はで私のアプリをラップする能力を得るでしょう：

imports...... 
class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    } 
    } 

    render() { 
     return (
     <BrowserRouter> 
      <div> 
      <Menu /> 
      <main> 
       <Switch> 
       <Route exact path="/about" component = {About} /> 
       <Route exact path="/admin" component = {BooksForm} /> 
       <Route exact path="/cart" component = {Cart} /> 
       <Route exact path="/" component = {BookList} /> 
       </Switch> 
       <Footer /> 
      </main> 
      </div> 
     </BrowserRouter> 
    ); 

    } 

    componentDidMount(){ 
    this.props.getCart(); 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ 
    getCart 
    }, dispatch) 
} 

export default connect(null, mapDispatchToProps)(App); 

私は私のindex.jsは次のようになりますので、このコンポーネントの私のBrowserRouterのOUを移動しようとしました異なるルータ。問題は、BrowserRouterをAppコンポーネントから移動して停止したときです。リンクをクリックするだけではもう機能しません。 urlは変更されていますが、私のアプリはdifferentnetコンポーネントをレンダリングしていません。このコンポーネントからルータを移動するにはどうすればよいですか？サーバー上で

Answer 1

、あなたはこれに類似のアプリラップされます：あなたが反応し、ルータを（URLから）場所としてだけでなく、コンテキストオブジェクトを渡す

const routerContext = {}; 

const appComponent = (
    <Provider store={store}> 
     <StaticRouter location={req.url} context={routerContext}> 
     <App /> 
     </StaticRouter> 
    </Provider> 
); 

を。

クライアント側はあなたの例のようなものです：

<Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
    <App/> 
    </BrowserRouter> 
</Provider>