如何使用 React Router 路由到不同的 URL？

Question

我需要知道是否可以将路由索引到不同的 URL。

目前，当我输入 localhost 时，它会重定向到 localhost（显而易见）

但是，我希望将它直接重定向到 localhost/meals。

这是我当前的代码片段：

var Index = React.createClass({
    render: function() {
        return <Router history={history}>
            <Route path="/" component={Layout}>
                <IndexRoute component={WeekMenu}/>
                <Route path="meals" component={WeekMenu}/>
            <Route path="register" component={Register}/>
            </Route>
    </Router>

嗯，默认情况下，当我到达 "localhost" 时，它会将我重定向到 "meals"，因为我的索引路由被重定向到 "WeekMenu"，这就是我调用的相同组件 "meals".

但是 URL 保持不变，即 "localhost"

React 路由器也可以更改 URL "localhost/meals" 吗？

提前致谢。

Answer 1

你可以使用 IndexRedirect：

<Router history={history}>
        <Route path="/" component={Layout}>
            <IndexRedirect to="/meals" />
            <Route path="meals" component={WeekMenu}/>
            <Route path="register" component={Register}/>
        </Route>
</Router>

如果访问者访问 /，这会自动将访问者重定向到 /meals 页面。

有关其他信息，请参阅 React documentation

如何使用 React Router 路由到不同的 URL？

How to route to a Different URL using React Router?

reactjs

react-router