我有一个reactjs
年的小项目要玩和学习.我需要有一个类型的标题,将显示基于url路径.下面是处理路由的my index.js:
const history = useRouterHistory(createHistory)({
basename: '/test'
})
class Tj extends React.Component {
render() {
return (
<Router history={history}>
<Route path={"/"} component={Bridge} >
<IndexRoute component={Home} />
<Route path={"user"} component={T} />
<Route path={"home"} component={Home} />
</Route>
<Route path={"/t/"} component={Bridge2} >
<IndexRoute component={T} />
<Route path={"contact"} component={Home} />
</Route>
</Router>
);
}
}
render(
<Provider store={store}>
<Tj/>
</Provider>,
window.document.getElementById('mainContainer'));
正如你们所见,我使用test作为根目录,并根据用户对url的输入来决定应该使用哪个标题.这里还有Bridge2.js个:
export class Bridge2 extends React.Component {
render() {
return (
<div>
<div className="row">
<Header2/>
</div>
<div className="row">
{this.props.children}
</div>
</div>
);
}
}
和Bridge.js:
export class Bridge extends React.Component {
render() {
// alert(this.props.children.type);
var Content;
if(this.props.children.type){
Content=<div>
<div className="row">
<Header/>
</div>
<div className="row">
{this.props.children}
</div>
</div>;
}
else{
Content=<div>
<div className="row">
<Header/>
</div>
<div className="row">
{this.props.children}
</div>
</div>;
}
return (
Content
);
}
}
当我在webpack dev服务器上运行这个程序时,一切都正常.例如,当我使用http://localhost:3003/test/
桥.js已加载,如果我运行http://localhost:3003/test/t/
bridge2.js已加载,这是预期的.
然而,由于WebPackDev服务器不是生产服务器,所以我使用tomcat,目前我使用EclipseWeb应用程序项目,并复制了我的包.js文件和索引.在那边.现在的问题是,当我运行tomcat服务器时,它能够很好地识别并显示这个路径:
http://localhost:8080/test/
但当我得到http://localhost:8080/test/t/
时:
HTTP状态404-/test/t/
基本上就是说资源文件不可用.据我观察,这在编码方面不是一个问题,因为路由在WebPackDev服务器中运行良好,但对于tomcat来说,react路由似乎无法处理它.我现在做的有什么问题吗?这样行吗?