反應動態路由器

Question

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

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

/users/{id}/{something} 

'ID' 和 '東西' 是可選參數

，當我剛剛訪問/用戶，它會去的用戶列表

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="https://stackoverflow.com/users/:id" component={SomeComponent} /> 

，然後你將有SomeComponent爲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> 
)