Question

我正在与提供指向导航菜单的路由链接的路由器一起工作，但是在我的index.js中似乎不起作用

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom';
 import Home from './Home';
  import ContactUs from './ContactUs';

  ReactDOM.render((
  <Router >
    <Route path="/" component={App}>           
       <Route path="Home" component={Home}/>
       <Route path="ContactUs" component={ContactUs}/>
    </Route>
   </Router>
  ), document.getElementById('root'));
   registerServiceWorker();

在我的app.js中，我有以下链接，我正在使用react bootstrap和render函数中的react

   <Nav>
      <Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
          <DropdownToggle nav caret>
              Dropdown
          </DropdownToggle>
          <DropdownMenu>
                <DropdownItem header>action</DropdownItem>                    
                <DropdownItem divider/>
                <DropdownItem disable> action1</DropdownItem>
          </DropdownMenu>                  
      </Dropdown>
      <NavItem>
           <NavLink>
              <Link to="Home">Home </Link>
           </NavLink>
       </NavItem>
       <NavItem>
          <NavLink>
            <Link to="ContactUs">ContactUs</Link>
          </NavLink>
       {this.props.children}
    </Nav>

它也不会引发任何错误，这是正确的做法吗？任何帮助将不胜感激。

使用链接显示在url上，但随后不会重定向到显示其内容的页面

错误

index.js:2178 Warning: You should not use <Route component> and <Route 
 children> in the same route; <Route children> will be ignored
 Warning: Received `true` for a non-boolean attribute `disable`.

 If you want to write it to the DOM, pass a string instead: disable="true" or disable={value.toString()}.
in button (created by DropdownItem)
in DropdownItem (at App.js:39)
in div (created by DropdownMenu)
in DropdownMenu (at App.js:36)
in li (created by Manager)
in Manager (created by Dropdown)
in Dropdown (at App.js:32)
in ul (created by Nav)
in Nav (at App.js:31)
in div (at App.js:26)
in App (created by Route)
in Route (at src/index.js:13)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:12)`

Answer 1

由于路由链接不起作用，您没有使用react-router-dom链接组件。您可以执行以下操作：

public T Clone<T>(T source)
{
    var obj = Activator.CreateInstance<T>();
    var type = source.GetType();

    foreach (var property in type.GetProperties())
    {
        if (!property.IsValid())
            continue;

        if (property.SetMethod != null)
        {
            property.SetValue(obj, property.GetValue(source));
        }
    }

    foreach (var field in type.GetFields())
    {
        if (field.IsPublic == false || !field.IsValid())
            continue;

        field.SetValue(obj, field.GetValue(source));
    }

    return obj;
}

public struct SimpleStruct
{
    public int I;
    public string S { get; set; }
    [Cloneable(CloningMode.Ignore)]
    public string Ignored { get; set; }

    public string Computed => S + I;

    public SimpleStruct(int i, string s)
    {
        I = i;
        S = s;
        Ignored = null;
    }
}

public class Simple
{
    public int I;
    public string S { get; set; }
    [Cloneable(CloningMode.Ignore)]
    public string Ignored { get; set; }
    [Cloneable(CloningMode.Shallow)]
    public object Shallow { get; set; }

    public string Computed => S + I + Shallow;
}

Answer 2

更新

在最新版本中，“路线”组件不允许使用Switch嵌套路线在这种情况下有效。更新后的路线如下：

<Router>
<Switch>
    <Route exact path="/" component={App}>           
       <Route path="/home" component={Home}/>
       <Route path="/contact-us" component={ContactUs}/>
    </Route>
<Switch>
   </Router>

您已经错过了NavLink的“ to”属性中的链接路径，以下内容对您来说应该适用：

<NavItem>
      <NavLink to="/Home">Home</NavLink>
       </NavItem>
       <NavItem>
       <NavLink to="/ContactUs">ContactUs</NavLink>
</NavItem>

此外，最好在路由配置中定义的路由使用小写字母：

<Router>
    <Route path="/" component={App}>           
       <Route path="home" component={Home}/>
       <Route path="contact-us" component={ContactUs}/>
    </Route>
</Router>

此外，官方文档https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md说：

<NavLink>是<Link>的特殊版本，它将在与当前URL匹配时将样式属性添加到呈现的元素。

因此，无需将<Link>放在<NavLink>内

使用无法在React JS中工作的路由器进行路由

2 个答案: