反應動態路由器

Question

如何使它動態化？ 我目前有靜態路由，但現在需要一個可選的url參數

我想要實現的是有2個這樣的可選段：

/users/{id}/{something}

'id'和'something'是可選參數

當我僅訪問/ users時，它將轉到用戶列表

server.js

 require('babel-register'); const express = require('express'); const React = require('react'); const ReactDOMServer = require('react-dom/server'); const { StaticRouter } = require('react-router-dom'); const lodash = require('lodash'); const fs = require('fs'); const baseTemplate = fs.readFileSync('./index.html'); const template = lodash.template(baseTemplate); const App = require('../client/Root').default; const port = 3000; const server = express(); server.use('/public', express.static('./public')); server.use(function (req, res) { const context = {}; const body = ReactDOMServer.renderToString( React.createElement( StaticRouter, { location: req.url, context: context }, React.createElement(App) ) ); res.write(template({ content: body })); res.end(); }) server.listen(port, function () { console.log(`server running at port ${port}`) }); 

在我的反應組件中

 const Root = () => ( <Provider store={store}> <Switch> <Route path='/users' exact component={Home}/> </Switch> </Provider> ) 

Answer 1

您可以將以下模式用於react-router ...

<Route path="/users/:id" component={SomeComponent} />

然后您將可以訪問SomeComponent的id為this.props.match.id

Answer 2

您可以嵌套路線。

const Root = () => (
  <Provider store={store}>
    <Switch>
      <Route path="/users" component={Home}>
        <IndexRoute component={YourDefaultComponent} />

        <Route path=":id/:something" component={YourOtherComponent} />
      </Route>
    </Switch>
  </Provider>
)