React Router(v3)重定向不重定向到新位置
React Router (v3) redirect not redirecting to new location
我有这样的路由器设置:
import React from 'react';
import {IndexRoute, NotFoundRoute, Route, Redirect} from 'react-router';
import App from './components/app';
import Home from './components/Home';
import AuthorPage from './components/authors/AuthorPage';
import About from './components/about/About';
import NotFound from './components/NotFound';
const routes = (
<Route path="/" component={App} >
<IndexRoute component={Home} />
<Route path="about" component={About} />
<Route path="authors" component={AuthorPage} />
<Route path="*" component={NotFound} />
<Redirect from="/about-us" to="/about" />
</Route>
);
export default routes;
除了重定向之外的一切都正常。每当我尝试导航到 /about-us
时,我都会看到一个显示 Cannot GET /about-us
.
的白页
在文档中似乎找不到任何关于此的内容。路线的 "from" 部分是否仍然必须存在才能正常工作,还是应该不管怎样都重定向我?
编辑:
我还应该提到我使用了 history 包,如 react-router 升级指南中所述:https://github.com/rackt/react-router/blob/master/upgrade-guides/v1.0.0.md
这是我的 main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-router';
import routes from './routes';
import createBrowserHistory from 'history/lib/createBrowserHistory'
// Using history to avoid default behavior of weird urls like `?_k=umhx1s`
// See: https://github.com/rackt/react-router/blob/master/upgrade-guides/v1.0.0.md
let history = createBrowserHistory();
const root = document.getElementById('app');
ReactDOM.render(<Router history={history}>{routes}</Router>, root);
你好像打错了。在您的路线中,您 <Route path="about" component={About} />
注意到您有 path="about"
,并且您正在尝试导航至 /about-us
。这与您的任何路线都不匹配。尝试导航至 /about
或将您的路线更改为 <Route path="about-us" component={About} />
.
原来我的路线顺序错了。我的 "catch all" NotFound-route 需要放在我的重定向之后才能工作。
import React from 'react';
import {IndexRoute, NotFoundRoute, Route, Redirect} from 'react-router';
import App from './components/app';
import Home from './components/Home';
import AuthorPage from './components/authors/AuthorPage';
import About from './components/about/About';
import NotFound from './components/NotFound';
const routes = (
<Route path="/" component={App} >
<IndexRoute component={Home} />
<Route path="about" component={About} />
<Route path="authors" component={AuthorPage} />
<Redirect from="about-us" to="about" /> // Switched order with below Route.
<Route path="*" component={NotFound} />
</Route>
);
export default routes;
我有这样的路由器设置:
import React from 'react';
import {IndexRoute, NotFoundRoute, Route, Redirect} from 'react-router';
import App from './components/app';
import Home from './components/Home';
import AuthorPage from './components/authors/AuthorPage';
import About from './components/about/About';
import NotFound from './components/NotFound';
const routes = (
<Route path="/" component={App} >
<IndexRoute component={Home} />
<Route path="about" component={About} />
<Route path="authors" component={AuthorPage} />
<Route path="*" component={NotFound} />
<Redirect from="/about-us" to="/about" />
</Route>
);
export default routes;
除了重定向之外的一切都正常。每当我尝试导航到 /about-us
时,我都会看到一个显示 Cannot GET /about-us
.
在文档中似乎找不到任何关于此的内容。路线的 "from" 部分是否仍然必须存在才能正常工作,还是应该不管怎样都重定向我?
编辑:
我还应该提到我使用了 history 包,如 react-router 升级指南中所述:https://github.com/rackt/react-router/blob/master/upgrade-guides/v1.0.0.md
这是我的 main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-router';
import routes from './routes';
import createBrowserHistory from 'history/lib/createBrowserHistory'
// Using history to avoid default behavior of weird urls like `?_k=umhx1s`
// See: https://github.com/rackt/react-router/blob/master/upgrade-guides/v1.0.0.md
let history = createBrowserHistory();
const root = document.getElementById('app');
ReactDOM.render(<Router history={history}>{routes}</Router>, root);
你好像打错了。在您的路线中,您 <Route path="about" component={About} />
注意到您有 path="about"
,并且您正在尝试导航至 /about-us
。这与您的任何路线都不匹配。尝试导航至 /about
或将您的路线更改为 <Route path="about-us" component={About} />
.
原来我的路线顺序错了。我的 "catch all" NotFound-route 需要放在我的重定向之后才能工作。
import React from 'react';
import {IndexRoute, NotFoundRoute, Route, Redirect} from 'react-router';
import App from './components/app';
import Home from './components/Home';
import AuthorPage from './components/authors/AuthorPage';
import About from './components/about/About';
import NotFound from './components/NotFound';
const routes = (
<Route path="/" component={App} >
<IndexRoute component={Home} />
<Route path="about" component={About} />
<Route path="authors" component={AuthorPage} />
<Redirect from="about-us" to="about" /> // Switched order with below Route.
<Route path="*" component={NotFound} />
</Route>
);
export default routes;