反应动态路由器

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> 
)