2017-08-10 3 views
2

私はルータに反応するのが新しく、次のような状況で誰かがどのように設定するのか想像していました。あいまいなパスを持つサブフォルダ内にルータを設定するには

'http://www.example.com'で実行されているPHPアプリケーションがあるとします。特定のルートでは、'http://www.example.com/misc/stats/'などの反応アプリケーションがあります。このアプリケーションには2つのルート'/'とあいまいなものがあります'/:user'です。

私は反応ルータ4を使用しています。どのように私はそのフォルダからアプリを提供し、ルートはそのURLに相対的である。現時点では、私はbasenameのように設定しようとしました。

ReactDOM.render(
    <Provider store={store}> 
    <Router basename={basePath} history={history}> 
     <App /> 
    </Router> 
    </Provider>, 
    root, 
); 

次に、<App />では簡単な設定があります。

const Test1 =() => (<div>Test1</div>); 
const Test2 =() => (<div>Test2</div>); 

class App extends Component { 
    render() { 
    return (
     <div> 
     <Link to="/">A</Link> | <Link to="/b">B</Link> 
     <Switch> 
      <Route path="/a" component={Test1} /> 
      <Route path="/b" component={Test2} /> 
     </Switch> 
     </div> 
    ); 
    } 
} 

しかし、これは機能しません。何かご意見は?さらに、私の最大の懸念は、直接URLを処理する方法です。ユーザー例:'http://www.example.com/misc/stats/johndoe'もちろん、johndoeフォルダはありません。アプリケーションは'stats'フォルダから提供されます。私は/misc/stats/(*)にすべてのリクエストを/misc/stats/index.htmlに送る必要があると信じていますが、私はあまりよく分かりません。

答えて

3

あなたはのparamを追加したいように見えます - それは、このようなものになります。

<Link to=`/misc/stats/${user}`>B</Link> 

${user}はもちろんです:あなたはこのようなリンクを定義することができ

<Route path="/misc/stats/:user" component={Test1} />

をユーザー名を含むリンクを渡す変数。

コンポーネントをTest1で使用して、そのパラメータをthis.props.match.params.user経由で消費し、ビューをカスタマイズするために必要な操作を行います。

関連する問題