React-router url在刷新或手动写入时不起作用

我正在使用React-router，当我点击链接按钮时，它工作得很好，但当我刷新我的网页时，它没有加载我想要的东西。

例如，我在localhost/joblist和一切都很好，因为我到达这里按下一个链接。但如果我刷新网页，我会得到:

Cannot GET /joblist

默认情况下，它不是这样工作的。最初我有我的URL localhost/#/和localhost/#/joblist，他们工作得很好。但我不喜欢这种类型的URL，所以试图删除#，我写道:

Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(<Handler/>, document.body);
});

这个问题不会发生在localhost/，这个总是返回我想要的。

这个应用程序是单页的，所以/joblist不需要向任何服务器询问任何事情。

我的整个路由器。

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="joblist" path="/joblist" handler={JobList}/>
        <DefaultRoute handler={Dashboard}/>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

当前回答

HashRouter的实现很简单，

import {HashRouter as Router,Switch,Route,Link} from 'react-router-dom';


  function App() {
  return (
    <Router>
        <Switch>
          <Route path="/" exact component={InitialComponent} />
          <Route path="/some" exact component={SomeOtherComponent} />
        </Switch>
      </Router>
  );
}

它在浏览器中是这样的 Http:localhost:3000/#/， Http:localhost:3000/#/some

2021-07-10 23:26:32

其他回答

请求数据的另一种方式(即使您立即指向url)是使每个组件都有一个调用最后一个参数的方法，如/about/test。

然后，在状态提供程序中，有一个连接到您想要请求数据的组件的函数。

2020-06-04 20:43:00

当我在Electron中使用React作为前端，使用React -router-dom作为路由时，我就遇到了这个问题。

我用HashRouter替换了BrowserRouter，这是固定的。

这里有一个简单的例子:

import {
  HashRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

2021-06-03 12:56:50

假设你有以下Home route定义:

<Route exact path="/" render={routeProps => (
   <Home routeProps={routeProps}/>
)}/>

{/* Optional catch-all router */}
<Route render={routeProps => (
       <div><h4>404 not found</h4></div>
)}/>

在你的Home组件中，你可以在ComponentWillMount事件中拦截请求，

const searchPath = this.props.routeProps.location.search;

if (searchPath){
    this.props.routeProps.history.push("/" + searchPath.replace("?",""));
}
else{
    /*.... originally Home event */
}

现在，不是在URL处调用/joblist，而是请求/?<Home>组件将自动将请求重定向到/joblist(注意路径中有额外的问号)。

2019-07-09 05:43:54

如果你使用Apache作为你的web服务器，你可以在你的。htaccess文件中插入这个:

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

我正在使用react:“^16.12.0”和react-router:“^5.1.2” 这种方法是万能的，可能是最简单的入门方法。

2016-11-14 15:10:58

在index.html文件头部，添加以下内容:

<base href="/">
<!-- This must come before the CSS and JavaScript code -->

然后，当与Webpack开发服务器一起运行时，使用此命令。

webpack-dev-server --mode development --hot --inline --content-base=dist --history-api-fallback

-history-api-fallback是重要的部分

2018-04-01 14:26:39

React-router url在刷新或手动写入时不起作用

推荐文章

最新文章

标签