挣扎着路线的正则表达式

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