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

Question

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

/
/home
/@prd78

如果是第三个，我希望@之后的部分成为参数。

这个我试过了，但是明显错了：

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

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

感谢您的帮助。

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