我有一个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路由似乎无法处理它.我现在做的有什么问题吗?这样行吗?

推荐答案

首先,在使用react-router时,您必须注意以下差异.

当您在浏览器中输入localhost:3003/test/时,它将请求服务器,然后它将收到/test/index.htmljs包、css...

之后,无论何时单击内部链接(如localhost:3003/test/t/),浏览器都不会再次请求服务器.React-router将解析这个客户端,重新呈现页面的部分内容,并更新浏览器的地址栏(使用HTML5 pushstate()),而不会触发另一个服务器请求.

当您直接在地址栏中输入localhost:3003/test/t/时,浏览器将请求服务器,Tomcat没有/test/t/index.html左右,它返回404.因为Tomcat对react-reduxjavascript一无所知.

处理这种情况的一种方法是将404个错误配置为转发到/test/index.html.这可能是默认情况下webpack dev服务器的配置方式.

在apache上有很多这样做的例子,如果在我们的Tomcat前面有一个例子的话.

下面是一个例子:

httpd.conf:

...
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>
...

如果您单独使用Tomcat,可以try 在.war文件的web.xml中指定:

...
<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>
...

请注意,这并不是react-router个特定的问题,每个使用HTML5 pushstate()的应用程序都需要以某种方式处理这个问题.不过,Javascript服务器可以更无缝地处理这个问题.

Reactjs相关问答推荐

实时收听react前端应用程序中的webhook响应

如何使用next.js以DOM为目标在映射中使用Ref

是否将样式应用于父悬停(框架运动)上的子元素?

如何创建react router v6的自定义子路由?

基本react 应用程序正在触发两次Use Effect

无法在下一个标头上使用 React hooks

状态改变不会触发重新渲染

我无法通过 useContext 显示值

如何将 npm 包添加到我的 Vite + React 应用程序中?

在react的useEffect钩子中,我的函数被调用,但只有第一个函数能够改变状态,第二个函数无法改变状态.

BrowserRouter改变了URL但没有链接到页面

try 从 React JS 构建此教程游戏但无法继续前进

虽然通过了身份认证,但并没有导航到请求的页面

React 测试库 - 如何断言异步函数之间的中间状态?

React v6 中的公共和私有路由

如何在不重新加载页面的情况下加载新添加的数据?

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

NextJs - 如何从站点 map 生成器中删除重复的 URL?

将 C# Razor 条件块转换为 React.js 代码

可以'读取未定义的属性(读取'路径')