Question

我有一个网址

https://website.com/enable/code=react/string=true

My React路由器看起来像这样

<Router history={history}>
        <Route 
            path="/" 
            component={App}

        >
            <IndexRoute component={Page1} />                                
            <Route path="/enable/language='dynamicVal'/string='dynamicVal'>{page2()}</Route>    
        </Route>
    </Router>

现在Route path我需要获取language和string

的动态值

我试过这个。

/enable/language=(/:react)/string=(/:true)

如何以及在何处定义动态值？

Answer 1

您可以使用路径参数方法并构建您的路线，如

<Router history={history}>
    <Route 
        path="/" 
        component={App}
    >
        <IndexRoute component={Page1} />                                
        <Route path="/enable/:language/:codeString'>{page2()}</Route>    
    </Route>
</Router>

在您的组件中，您可以获得路径参数

如果您使用this.props.params.language或以下

，请

this.props.params.codeString和react-router-v3

和

如果您使用this.props.match.params.language

，请

this.props.match.params.codeString和react-router-v4

Answer 2

假设react-router v4（未在v3上测试，这是你似乎使用的？），你可以这样定义一个Route：

<Route
  exact path="/enable/language=:language/string=:stringVal"
  component={YourComponent} />`

在YourComponent中，这两个参数分别位于this.props.match.params.language和this.props.match.params.stringVal下。

有关工作示例，请参阅this CodeSandbox。

在路由中传递URL参数 - ReactJS

2 个答案: