Question

每当我尝试浏览类似于“/ about”的路径时，浏览器会像这样：“http://localhost:3000/#/about”。我收到了我的主页。 React Router不会将我引导到想要的路径。

我使用React Router v4。

这是我的App.jsx文件：

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router-dom').BrowserRouter;
var {Route,Link, hashHistory, Switch} = require('react-router-dom');

var Main = require('Main');
var Weather = require('Weather');
var About = require('About');
var Examples = require('Examples');



 ReactDOM.render(
   <Router>
     <div>

          <Route exact path="/about" component={About} />
          <Route exact path="/examples" component={Examples} />
          <Route exact path= "/" component={Main} />
    </div>
   </Router>
        ,document.getElementById('app')
         );

这两个解决方案不起作用： React Router Default Route Redirect to /home

React Router always redirect me to a different url

另一个问题：哪个版本的React Router更好用？由于简单，我认为v3比v4更好。

Answer 1

您正在使用哈希路由器（正如我在您的网址中看到的那样）。所以你必须使用HashRouter而不是Router。

    class Form extends Component {

      ....

      componentWillMount() {

        this.children = {}
        this.inputs   = {}
        this.model    = {}

        this.registerInputs(this.props.children)
      }

      registerInputs(children) {

        this.children = React.Children.map(children, (child) => {

          if(child.props.name) {
            return React.cloneElement(child, {
              bindToForm: this.bindToForm,
              unbindFromForm: this.unbindFromForm,
              validate: this.validate
            })
          }

          if(child.props.children) {
            this.registerInputs(child.props.children)
          }
          else {
            return child
          }
        })
      }

      render() {
        return (
          <form onSubmit={this.handleSubmit} className={this.props.formClass}>
            {this.children}
          </form>
        )
      }
    }

Answer 2

使用<Switch>组件包裹路线。

Answer 3

现在，您似乎使用了错误的路由器。您想使用HashRouter，但使用的是BrowserRouter。尝试更新您的导入。

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Link, HashRouter as Router, Switch } = require('react-router-dom');

React Router将所有请求重定向到“/”

3 个答案: