Question

我正在尝试使用react-router-dom 4，但我无法直接导航到路线。

以下是我的代码示例：

let Test = (props)  => (<div>This is a test component</div>);
let About = (props)  => (<div>About us</div>);

class App extends Component {
  render () {
    return (
      <Router>
        <div>
          <nav>
            <NavLink to="/about" activeClassName="selected">About</NavLink>
            <NavLink to="/" activeClassName="selected">Test</NavLink>
          </nav>
          <Route exact path="/"  component={Test} />
          <Route exact path="/about"  component={About} />
        </div>
      </Router>
    )
  }
}

当我尝试转到localhost:3000/about时，我在浏览器中显示 Not Found 。但是，当我转到localhost:3000时，点击关于链接，我就会被重定向。

在我的控制台中，我得到了

未捕获错误：uBlock原因：中止http://localhost:3000/about的内容脚本在contentscript.js：90

Answer 1

我假设你正在使用Webpack。如果是这样，在webpack配置中添加一些内容应该可以解决问题。具体而言，output.publicPath = '/'和devServer.historyApiFallback = true。下面是一个示例webpack配置，下面使用了^并修复了我的刷新问题。如果你对“为什么”感到好奇，this会有所帮助。

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

Answer 2

当你去localhost：3000 / about时，它运行服务器端路由，而你没有设置服务器端路由，所以你得到404;当你去localhost时： 3000，然后单击关于链接，现在，您运行已设置的客户端路由。换句话说，它运行react-router-dom，所以你可以得到页面

react-router-dom 4路由问题

2 个答案: