Question

正如您所知，react-router已更新至v4并更改了许多thinkgs和语法。每当我尝试手动访问路由时，它都会向我显示错误Cannot Get/，但在我添加#时会有效。我希望能够使用快速js前往路线，无论是否在broswer输入中手动插入路径。谢谢！

这是一段代码

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <nav>
            <div className="nav-wrapper">
              <a href="#" className="brand-logo">Logo</a>
              <ul id="nav-mobile" className="right hide-on-med-and-down">
                <li><Link to="/">Home</Link></li>
                <li><Link to="/login">Login</Link></li>
                <li><Link to="/register">Register</Link></li>
              </ul>
            </div>
          </nav>
          <Match exactly pattern="/" component={Home} />
          <Match pattern="/login" component={Login} />
          <Match pattern="/register" component={Register} />

          <Miss component={NoMatch}/>
        </div>
      </BrowserRouter>
    )
  }
}

Answer 1

如何处理服务器上的路由？为了使react和react-router按预期工作，您必须确保快速方面至少有两件事（并按特定顺序！）：

您的静态文件服务中间件已正确配置并已安装到您的快速应用程序。
您有一个catch-all路由处理程序，它始终为您的初始应用程序包（通常是index.html和应用程序脚本）提供服务。例如： //app is the express application instance //setup static file handling with express.static middleware app.use('/', express.static('path_to_your_static_files')); // //this will match all routes app.get('/*', (req,res) => { //serve your app here.... });

静态中间件未处理的每个请求最终都会进入此处理程序，只需确保以正确的顺序挂载。通过上面的示例，您“手动”输入的所有内容都将导致响应来自服务器，所以一定要从客户端路由器处理404和其他特殊情况

使用react-router v4的服务器端路由

1 个答案: