我是 React 和 React Router 的新手。我正在使用 React Router v4 并遵循基于以前版本的教程 - 但我让它工作了(使用在 SO 上找到的一些东西和 React Router v4 文档上的一些东西)。
但有一件事困扰着我。
我有一个网址http://localhost:3000/#/bugs http://localhost:3000/#/bugs,它基本上加载了我所有错误的列表。但我也有可能的网址,例如它加载一组特定的 url。
网址本身可以正常工作并按预期完成工作。
奇怪的是,每当我打字时(或任何参数),组件完成其工作,但 URL 地址栏显示http://localhost:3000/#/bugs http://localhost:3000/#/bugs(尽管渲染显示了与显示的优先级和状态相关的所有内容)。
不知何故,URL 位置栏发生了变化,但我不明白为什么。
这是我的 App.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BugList} from './BugList';
import {Redirect} from 'react-router';
import {HashRouter as Router, Route} from 'react-router-dom';
const NoMatch = React.createClass({
render : function (){
return(
<h2>This path does not exist</h2>
);
}
});
ReactDOM.render(
(
<Router>
<div>
<Route path='/bugs' component={BugList}/>
<Route path='/bugs/priority/:priority' component={BugList}/>
<Redirect from='/' to="/bugs" />
<Route path="*" component={NoMatch} />
</div>
</Router>
),
document.getElementById('main')
);
提前致谢。
4月12日编辑。尽管有下面某人的宝贵帮助,这个问题仍然没有解决。我尝试在路由器内使用交换机,但它根本不起作用(没有显示任何内容)。所以问题仍然发生,这是我的App.js的当前状态,使用react-15.5.3,react-dom-15.5.3,react-router-4.0.0和react-router-dom-4.0。 0....
import React from 'react';
import ReactDOM from 'react-dom';
import {BugList} from './BugList';
import BugEdit from './BugEdit';
import {Redirect} from 'react-router';
import {HashRouter as Router, Route} from 'react-router-dom';
const NoMatch = React.createClass({
render : function (){
return(
<h2>This path does not exist</h2>
);
}
});
ReactDOM.render(
(
<Router>
<div>
<Redirect from='/' to="/bugs" />
<Route path='/bugs' component={BugList}/>
<Route path='/bug/:id' component={BugEdit}/>
<Route path="*" component={NoMatch} />
</div>
</Router>
),
document.getElementById('main')
);