reactjs - 为路线使用正则表达式而苦苦挣扎

Question

我正在使用 React Router 4。我只有一个组件（目前），我基本上希望路由匹配这个：

/
/home
/@prd78

在第三个的情况下，我希望@之后的部分成为一个参数。

我已经尝试过了，但这显然是错误的：

<BrowserRouter>
    <Route path="/|home|product|@:ref(\w+)/" component={App} />
</BrowserRouter>

我可以有不同的路线，但在这种情况下，应用程序将被加载多次。

谢谢你的帮助。

标签： reactjsreact-router-v4react-router-dom

Answer 1

<Route exact path="/" component={App} />
<Route path="/home" component={App} />
<Route path="/@:ref" component={App} />

然后使用以下命令访问它们：

const App = ({ match }) => (
    <div>
        <p>Ref: {match.params.ref}</p>
    </div>
);