Question

我对react-router路由感到困惑。我收到错误消息：警告：[反应路由器]位置“ / add”与任何路由均不匹配 // conf.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link} from "react-router-dom";
import add  from './add';
import { createBrowserHistory } from 'history';
import confv1 from './confv1';
var button =React.createElement(Link, {
  to: "/add"
}, React.createElement("button", {
  type: "button"
}, "Add a project"));

  export default class Root extends Component {
    render() {
      return (


React.createElement(Router, {
  history: createBrowserHistory()
}, React.createElement(Route, {
  path: "/conf",
  component: confv1
}, React.createElement(Route, {
  component: conf
}), React.createElement(Route, {
  path: "/add",
  component: add
})
)));
      // );this is the conf page

and this is the add page when I refresh it I got the error "Warning: [react-router] Location "/add" did not match any routes`" } }

`

Answer 1

我使用routes.js解决了该错误

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './App';
import conf from './conf';
import add from './add';


export default (
    <Route path="/" component={App}>
        <IndexRoute component={conf} />
        <Route path="/conf" component={conf} >
        <IndexRoute component={add} />
        <Route path="/add" component={add} />
           </Route>

    </Route>

);

// index.js

import 'babel-polyfill';
import React from 'react';

import {render} from 'react-dom';
import {Router, BrowserRouter } from 'react-router';
import routes from './routes';
import {browserHistory} from 'react-router';

const history = require("history").createBrowserHistory();


render(
    <Router history={browserHistory} routes={routes} />, document.getElementById('root')
)

但是当我刷新添加页面时，内容中没有任何显示enter image description here

Answer 2

我从您的代码片段中注意到您正在使用两个不同的npm软件包，我想知道这是否是问题的一部分。

在您调用的Config.js下：

import { BrowserRouter as Router, Route, Link} from "react-router-dom";

然后在您调用的index.js下：

import {Router, BrowserRouter } from 'react-router';

如果不能解决问题，您可以创建一个codeandbox以便我看看吗？ https://codesandbox.io/

以下是有关您尝试使用的两个npm软件包的更多信息： https://www.npmjs.com/package/react-router
https://www.npmjs.com/package/react-router-dom
祝你好运！

警告：[反应路由器]位置“ / add”与任何路由都不匹配

2 个答案: